From 44bbbc07675b1d40444dbf80c556e0e0344b75ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= Date: Thu, 5 Sep 2024 16:54:38 +0200 Subject: [PATCH 1/2] chore: Enable TSDoc and JSDoc formatting --- .eslintrc.js | 2 +- .prettierignore | 1 + apps/common-app/package.json | 2 +- .../CustomHandler/useAnimatedPagerHandler.ts | 6 +- .../examples/LayoutAnimations/ChangeTheme.tsx | 20 +- .../src/examples/LiquidSwipe/Weave.tsx | 104 ++--- .../RuntimeTests/ReJest/matchers/Matchers.ts | 5 +- .../SharedElementTransitions/ChangeTheme.tsx | 4 +- apps/common-app/src/types.ts | 5 +- apps/fabric-example/package.json | 2 +- apps/macos-example/package.json | 2 +- apps/next-example/package.json | 2 +- apps/paper-example/package.json | 2 +- apps/tvos-example/package.json | 2 +- apps/web-example/package.json | 2 +- package.json | 3 +- .../eslint-plugin-reanimated/package.json | 2 +- packages/react-native-reanimated/.eslintrc.js | 13 +- .../common/useAnimatedPropsTest.tsx | 2 +- packages/react-native-reanimated/package.json | 2 +- .../plugin/package.json | 2 +- .../plugin/src/autoworkletization.ts | 9 +- .../plugin/src/class.ts | 9 +- .../plugin/src/file.ts | 7 +- .../plugin/src/globals.ts | 8 +- .../plugin/src/utils.ts | 50 ++- .../plugin/src/workletStringCode.ts | 3 +- .../plugin/src/workletSubstitution.ts | 8 +- .../react-native-reanimated/src/Animated.ts | 55 ++- .../react-native-reanimated/src/Bezier.ts | 5 +- .../react-native-reanimated/src/Colors.ts | 21 +- .../src/ConfigHelper.ts | 4 +- .../react-native-reanimated/src/Easing.ts | 42 +- .../src/UpdateLayoutAnimations.ts | 21 +- .../src/animation/clamp.ts | 7 +- .../src/animation/decay/decay.ts | 7 +- .../src/animation/decay/utils.ts | 16 +- .../src/animation/delay.ts | 8 +- .../src/animation/repeat.ts | 14 +- .../src/animation/sequence.ts | 8 +- .../src/animation/spring.ts | 12 +- .../src/animation/springUtils.ts | 101 +++-- .../src/animation/timing.ts | 17 +- .../transformationMatrix/matrixUtils.tsx | 2 +- .../src/animation/util.ts | 15 +- .../src/commonTypes.ts | 96 +++-- .../src/component/FlatList.tsx | 14 +- .../src/component/LayoutAnimationConfig.tsx | 6 +- .../src/component/PerformanceMonitor.tsx | 6 +- .../src/component/ReducedMotionConfig.tsx | 6 +- packages/react-native-reanimated/src/core.ts | 11 +- .../createAnimatedComponent/commonTypes.ts | 7 +- .../createAnimatedComponent.tsx | 12 +- .../createAnimatedComponent/getViewInfo.ts | 4 +- .../setAndForwardRef.ts | 23 +- .../react-native-reanimated/src/errors.ts | 4 +- .../src/helperTypes.ts | 50 +-- .../src/hook/commonTypes.ts | 18 +- .../src/hook/useAnimatedGestureHandler.ts | 17 +- .../src/hook/useAnimatedKeyboard.ts | 3 +- .../src/hook/useAnimatedProps.ts | 15 +- .../src/hook/useAnimatedReaction.ts | 14 +- .../src/hook/useAnimatedRef.ts | 5 +- .../src/hook/useAnimatedScrollHandler.ts | 17 +- .../src/hook/useAnimatedSensor.ts | 7 +- .../src/hook/useAnimatedStyle.ts | 12 +- .../src/hook/useComposedEventHandler.ts | 18 +- .../src/hook/useDerivedValue.ts | 17 +- .../src/hook/useEvent.ts | 22 +- .../src/hook/useFrameCallback.ts | 9 +- .../src/hook/useHandler.ts | 16 +- .../src/hook/useReducedMotion.ts | 6 +- .../src/hook/useScrollViewOffset.ts | 4 +- .../src/hook/useSharedValue.ts | 10 +- .../src/hook/useWorkletCallback.ts | 4 +- .../react-native-reanimated/src/hook/utils.ts | 2 +- packages/react-native-reanimated/src/index.ts | 4 +- .../src/interpolateColor.ts | 28 +- .../src/interpolation.ts | 34 +- .../animationBuilder/BaseAnimationBuilder.ts | 26 +- .../ComplexAnimationBuilder.ts | 62 ++- .../animationBuilder/commonTypes.ts | 3 +- .../layoutReanimation/animationsManager.ts | 3 +- .../defaultAnimations/Bounce.ts | 60 ++- .../defaultAnimations/Fade.ts | 60 ++- .../defaultAnimations/Flip.ts | 72 ++-- .../defaultAnimations/Lightspeed.ts | 24 +- .../defaultAnimations/Pinwheel.ts | 12 +- .../defaultAnimations/Roll.ts | 24 +- .../defaultAnimations/Rotate.ts | 48 ++- .../defaultAnimations/Slide.ts | 48 ++- .../defaultAnimations/Stretch.ts | 24 +- .../defaultAnimations/Zoom.ts | 96 +++-- .../defaultTransitions/CurvedTransition.ts | 6 +- .../defaultTransitions/EntryExitTransition.ts | 3 +- .../defaultTransitions/FadingTransition.ts | 7 +- .../defaultTransitions/JumpingTransition.ts | 6 +- .../defaultTransitions/LinearTransition.ts | 10 +- .../defaultTransitions/SequencedTransition.ts | 7 +- .../sharedTransitions/SharedTransition.ts | 49 ++- .../web/animationsManager.ts | 12 +- .../layoutReanimation/web/createAnimation.ts | 6 +- .../src/layoutReanimation/web/domUtils.ts | 4 +- .../src/logger/LogBox.ts | 3 +- .../src/logger/logger.ts | 15 +- .../react-native-reanimated/src/mutables.ts | 20 +- .../src/platform-specific/jsVersion.ts | 6 +- .../src/platformFunctions/dispatchCommand.ts | 7 +- .../platformFunctions/getRelativeCoords.ts | 11 +- .../src/platformFunctions/measure.ts | 10 +- .../src/platformFunctions/scrollTo.ts | 4 +- .../src/platformFunctions/setNativeProps.ts | 11 +- .../src/propsAllowlists.ts | 7 +- .../src/publicGlobals.ts | 13 +- .../react-native-reanimated/src/runtimes.ts | 16 +- .../src/shareableMappingCache.ts | 6 +- .../react-native-reanimated/src/shareables.ts | 25 +- .../react-native-reanimated/src/threads.ts | 42 +- prettier.config.js | 1 + yarn.lock | 398 +++++++++++++++++- 120 files changed, 1595 insertions(+), 827 deletions(-) create mode 100644 .prettierignore diff --git a/.eslintrc.js b/.eslintrc.js index 36ee0f8d196..dbef99f8e91 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -57,7 +57,7 @@ module.exports = { 'import', 'jest', '@typescript-eslint', - 'eslint-plugin-tsdoc', + 'tsdoc', ], env: { 'react-native/react-native': true, diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000000..378eac25d31 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +build diff --git a/apps/common-app/package.json b/apps/common-app/package.json index f2d54856186..94d0545254c 100644 --- a/apps/common-app/package.json +++ b/apps/common-app/package.json @@ -48,7 +48,7 @@ "eslint": "^8.57.0", "eslint-plugin-reanimated": "workspace:*", "patch-package": "^8.0.0", - "prettier": "2.8.8", + "prettier": "^3.3.3", "react": "18.3.1", "react-native": "0.75.2", "react-native-gesture-handler": "2.18.0", diff --git a/apps/common-app/src/examples/CustomHandler/useAnimatedPagerHandler.ts b/apps/common-app/src/examples/CustomHandler/useAnimatedPagerHandler.ts index 0e7fa68a6c2..c76d8cb5bf4 100644 --- a/apps/common-app/src/examples/CustomHandler/useAnimatedPagerHandler.ts +++ b/apps/common-app/src/examples/CustomHandler/useAnimatedPagerHandler.ts @@ -7,7 +7,7 @@ import { useEvent, useHandler } from 'react-native-reanimated'; import type { ReanimatedEvent } from 'react-native-reanimated'; export function useAnimatedPagerScrollHandler< - TContext extends Record + TContext extends Record, >( handlers: { onPageScroll: ( @@ -37,7 +37,7 @@ export function useAnimatedPagerScrollHandler< } export function useAnimatedPagerScrollStateHandler< - TContext extends Record + TContext extends Record, >( handlers: { onPageScrollStateChanged: ( @@ -70,7 +70,7 @@ export function useAnimatedPagerScrollStateHandler< } export function useAnimatedPagerSelectedPageHandler< - TContext extends Record + TContext extends Record, >( handlers: { onPageSelected: ( diff --git a/apps/common-app/src/examples/LayoutAnimations/ChangeTheme.tsx b/apps/common-app/src/examples/LayoutAnimations/ChangeTheme.tsx index 3aca2991333..69f86fa1ec5 100644 --- a/apps/common-app/src/examples/LayoutAnimations/ChangeTheme.tsx +++ b/apps/common-app/src/examples/LayoutAnimations/ChangeTheme.tsx @@ -30,16 +30,16 @@ function List() { layout: undefined, } : theme - ? { - entering: RotateInUpRight, - exiting: RotateOutUpLeft, - layout: Layout.easing(Easing.exp).delay(200), - } - : { - entering: SlideInRight, - exiting: SlideOutLeft, - layout: Layout.springify().delay(200), - }, + ? { + entering: RotateInUpRight, + exiting: RotateOutUpLeft, + layout: Layout.easing(Easing.exp).delay(200), + } + : { + entering: SlideInRight, + exiting: SlideOutLeft, + layout: Layout.springify().delay(200), + }, [disabled, theme] ); diff --git a/apps/common-app/src/examples/LiquidSwipe/Weave.tsx b/apps/common-app/src/examples/LiquidSwipe/Weave.tsx index 38cbb867a8c..4548295b143 100644 --- a/apps/common-app/src/examples/LiquidSwipe/Weave.tsx +++ b/apps/common-app/src/examples/LiquidSwipe/Weave.tsx @@ -99,84 +99,84 @@ export default function Weave({ L${maskWidth} ${curveStartY} C${maskWidth} ${curveStartY - horRadius.value * 0.1346194756} ${maskWidth - horRadius.value * 0.05341339583} ${ - curveStartY - vertRadius.value * 0.2412779634 - } + curveStartY - vertRadius.value * 0.2412779634 + } ${maskWidth - horRadius.value * 0.1561501458} ${ - curveStartY - vertRadius.value * 0.3322374268 - } + curveStartY - vertRadius.value * 0.3322374268 + } C${maskWidth - horRadius.value * 0.2361659167} ${ - curveStartY - vertRadius.value * 0.4030805244 - } + curveStartY - vertRadius.value * 0.4030805244 + } ${maskWidth - horRadius.value * 0.3305285625} ${ - curveStartY - vertRadius.value * 0.4561193293 - } + curveStartY - vertRadius.value * 0.4561193293 + } ${maskWidth - horRadius.value * 0.5012484792} ${ - curveStartY - vertRadius.value * 0.5350576951 - } + curveStartY - vertRadius.value * 0.5350576951 + } C${maskWidth - horRadius.value * 0.515878125} ${ - curveStartY - vertRadius.value * 0.5418222317 - } + curveStartY - vertRadius.value * 0.5418222317 + } ${maskWidth - horRadius.value * 0.5664134792} ${ - curveStartY - vertRadius.value * 0.5650349878 - } + curveStartY - vertRadius.value * 0.5650349878 + } ${maskWidth - horRadius.value * 0.574934875} ${ - curveStartY - vertRadius.value * 0.5689655122 - } + curveStartY - vertRadius.value * 0.5689655122 + } C${maskWidth - horRadius.value * 0.7283715208} ${ - curveStartY - vertRadius.value * 0.6397387195 - } + curveStartY - vertRadius.value * 0.6397387195 + } ${maskWidth - horRadius.value * 0.8086618958} ${ - curveStartY - vertRadius.value * 0.6833456585 - } + curveStartY - vertRadius.value * 0.6833456585 + } ${maskWidth - horRadius.value * 0.8774032292} ${ - curveStartY - vertRadius.value * 0.7399037439 - } + curveStartY - vertRadius.value * 0.7399037439 + } C${maskWidth - horRadius.value * 0.9653464583} ${ - curveStartY - vertRadius.value * 0.8122605122 - } + curveStartY - vertRadius.value * 0.8122605122 + } ${maskWidth - horRadius.value} ${ - curveStartY - vertRadius.value * 0.8936183659 - } + curveStartY - vertRadius.value * 0.8936183659 + } ${maskWidth - horRadius.value} ${curveStartY - vertRadius.value} C${maskWidth - horRadius.value} ${ - curveStartY - vertRadius.value * 1.100142878 - } + curveStartY - vertRadius.value * 1.100142878 + } ${maskWidth - horRadius.value * 0.9595746667} ${ - curveStartY - vertRadius.value * 1.1887991951 - } + curveStartY - vertRadius.value * 1.1887991951 + } ${maskWidth - horRadius.value * 0.8608411667} ${ - curveStartY - vertRadius.value * 1.270484439 - } + curveStartY - vertRadius.value * 1.270484439 + } C${maskWidth - horRadius.value * 0.7852123333} ${ - curveStartY - vertRadius.value * 1.3330544756 - } + curveStartY - vertRadius.value * 1.3330544756 + } ${maskWidth - horRadius.value * 0.703382125} ${ - curveStartY - vertRadius.value * 1.3795848049 - } + curveStartY - vertRadius.value * 1.3795848049 + } ${maskWidth - horRadius.value * 0.5291125625} ${ - curveStartY - vertRadius.value * 1.4665102805 - } + curveStartY - vertRadius.value * 1.4665102805 + } C${maskWidth - horRadius.value * 0.5241858333} ${ - curveStartY - vertRadius.value * 1.4689677195 - } + curveStartY - vertRadius.value * 1.4689677195 + } ${maskWidth - horRadius.value * 0.505739125} ${ - curveStartY - vertRadius.value * 1.4781625854 - } + curveStartY - vertRadius.value * 1.4781625854 + } ${maskWidth - horRadius.value * 0.5015305417} ${ - curveStartY - vertRadius.value * 1.4802616098 - } + curveStartY - vertRadius.value * 1.4802616098 + } C${maskWidth - horRadius.value * 0.3187486042} ${ - curveStartY - vertRadius.value * 1.5714239024 - } + curveStartY - vertRadius.value * 1.5714239024 + } ${maskWidth - horRadius.value * 0.2332057083} ${ - curveStartY - vertRadius.value * 1.6204116463 - } + curveStartY - vertRadius.value * 1.6204116463 + } ${maskWidth - horRadius.value * 0.1541165417} ${ - curveStartY - vertRadius.value * 1.687403 - } + curveStartY - vertRadius.value * 1.687403 + } C${maskWidth - horRadius.value * 0.0509933125} ${ - curveStartY - vertRadius.value * 1.774752061 - } + curveStartY - vertRadius.value * 1.774752061 + } ${maskWidth} ${curveStartY - vertRadius.value * 1.8709256829} ${maskWidth} ${curveStartY - vertRadius.value * 2} L${maskWidth} ${0} diff --git a/apps/common-app/src/examples/RuntimeTests/ReJest/matchers/Matchers.ts b/apps/common-app/src/examples/RuntimeTests/ReJest/matchers/Matchers.ts index ced4722458d..56b331ccda6 100644 --- a/apps/common-app/src/examples/RuntimeTests/ReJest/matchers/Matchers.ts +++ b/apps/common-app/src/examples/RuntimeTests/ReJest/matchers/Matchers.ts @@ -15,7 +15,10 @@ import type { SingleViewSnapshot } from '../TestRunner/UpdatesContainer'; export class Matchers { private _negation = false; // eslint-disable-next-line no-useless-constructor - constructor(private _currentValue: TestValue, private _testCase: TestCase) {} + constructor( + private _currentValue: TestValue, + private _testCase: TestCase, + ) {} get not() { this._negation = true; diff --git a/apps/common-app/src/examples/SharedElementTransitions/ChangeTheme.tsx b/apps/common-app/src/examples/SharedElementTransitions/ChangeTheme.tsx index dde15a9fa04..451132256f3 100644 --- a/apps/common-app/src/examples/SharedElementTransitions/ChangeTheme.tsx +++ b/apps/common-app/src/examples/SharedElementTransitions/ChangeTheme.tsx @@ -79,8 +79,8 @@ function getTheme(theme: boolean, disabled: boolean) { const transition = disabled ? undefined : theme - ? customTransition - : new SharedTransition(); + ? customTransition + : new SharedTransition(); return { style, transition }; } diff --git a/apps/common-app/src/types.ts b/apps/common-app/src/types.ts index 0dff44193ca..3ae81fcbf78 100644 --- a/apps/common-app/src/types.ts +++ b/apps/common-app/src/types.ts @@ -2,12 +2,13 @@ import React from 'react'; /** - * We need to augment react types because rn for web provides non-standard way of measuring components by injecting `measure` method to the ref. + * We need to augment react types because rn for web provides non-standard way + * of measuring components by injecting `measure` method to the ref. * * Reference: * https://github.com/necolas/react-native-web/blob/c47bec7b93d6a3b7c31bbc8bb2e4acd117b79bfc/packages/react-native-web/src/modules/usePlatformMethods/index.js#L69 * https://github.com/necolas/react-native-web/blob/c47bec7b93d6a3b7c31bbc8bb2e4acd117b79bfc/packages/react-native-web/src/exports/UIManager/index.js#L63 - * */ + */ declare module 'react' { interface Component { diff --git a/apps/fabric-example/package.json b/apps/fabric-example/package.json index c598c1ad3d8..f41e7339d4b 100644 --- a/apps/fabric-example/package.json +++ b/apps/fabric-example/package.json @@ -45,7 +45,7 @@ "eslint": "^8.57.0", "jest": "^29.6.3", "patch-package": "^8.0.0", - "prettier": "2.8.8", + "prettier": "^3.3.3", "react-test-renderer": "18.3.1", "typescript": "~5.3.0" }, diff --git a/apps/macos-example/package.json b/apps/macos-example/package.json index f4dc6824fde..08839776ffe 100644 --- a/apps/macos-example/package.json +++ b/apps/macos-example/package.json @@ -42,7 +42,7 @@ "babel-jest": "^29.6.3", "eslint": "^8.57.0", "jest": "^29.6.3", - "prettier": "2.8.8", + "prettier": "^3.3.3", "react-test-renderer": "18.2.0", "typescript": "~5.3.0" }, diff --git a/apps/next-example/package.json b/apps/next-example/package.json index 3e7647aee42..3046d80632e 100644 --- a/apps/next-example/package.json +++ b/apps/next-example/package.json @@ -29,7 +29,7 @@ "cypress": "^13.2.0", "eslint": "^8.57.0", "next-compose-plugins": "^2.2.1", - "prettier": "2.8.8", + "prettier": "^3.3.3", "start-server-and-test": "^2.0.1" } } diff --git a/apps/paper-example/package.json b/apps/paper-example/package.json index 2e5ab22b9f1..bf8686276ca 100644 --- a/apps/paper-example/package.json +++ b/apps/paper-example/package.json @@ -44,7 +44,7 @@ "eslint": "^8.57.0", "jest": "^29.6.3", "patch-package": "^8.0.0", - "prettier": "2.8.8", + "prettier": "^3.3.3", "react-test-renderer": "18.3.1", "typescript": "~5.3.0" }, diff --git a/apps/tvos-example/package.json b/apps/tvos-example/package.json index af9ee3b2867..9d0f74fde13 100644 --- a/apps/tvos-example/package.json +++ b/apps/tvos-example/package.json @@ -30,7 +30,7 @@ "babel-jest": "^29.6.3", "eslint": "^8.57.0", "jest": "^29.6.3", - "prettier": "2.8.8", + "prettier": "^3.3.3", "react-test-renderer": "18.2.0", "typescript": "~5.3.0" }, diff --git a/apps/web-example/package.json b/apps/web-example/package.json index 82a0a9ddc77..97518f41cc8 100644 --- a/apps/web-example/package.json +++ b/apps/web-example/package.json @@ -28,7 +28,7 @@ "@expo/metro-runtime": "^3.2.1", "@types/eslint": "^8", "eslint": "^8.57.0", - "prettier": "2.8.8", + "prettier": "^3.3.3", "serve": "^14.2.3", "typescript": "~5.3.0" } diff --git a/package.json b/package.json index b805631f6a3..b6bf4311aa9 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "eslint": "^8.57.0", "husky": "^9.0.11", "lint-staged": "^15.2.2", - "prettier": "2.8.8", + "prettier": "^3.3.3", + "prettier-plugin-jsdoc": "^1.3.0", "typescript": "~5.3.0" }, "resolutions": { diff --git a/packages/eslint-plugin-reanimated/package.json b/packages/eslint-plugin-reanimated/package.json index b633140b13f..3944e126a7e 100644 --- a/packages/eslint-plugin-reanimated/package.json +++ b/packages/eslint-plugin-reanimated/package.json @@ -20,7 +20,7 @@ "esbuild": "^0.20.0", "eslint": "^8.57.0", "jest": "^29.7.0", - "prettier": "2.8.8", + "prettier": "^3.3.3", "ts-jest": "^29.1.2", "typescript": "~5.3.0" } diff --git a/packages/react-native-reanimated/.eslintrc.js b/packages/react-native-reanimated/.eslintrc.js index 5e5da44248c..e0f3de174aa 100644 --- a/packages/react-native-reanimated/.eslintrc.js +++ b/packages/react-native-reanimated/.eslintrc.js @@ -1,8 +1,13 @@ module.exports = { extends: ['../../.eslintrc.js'], - plugins: ['eslint-plugin-reanimated'], + overrides: [ + { + files: ['./src/**/*.ts', './src/**/*.tsx'], + plugins: ['reanimated'], + rules: { + 'reanimated/use-reanimated-error': 'error', + }, + }, + ], ignorePatterns: ['lib'], - rules: { - 'reanimated/use-reanimated-error': 'error', - }, }; diff --git a/packages/react-native-reanimated/__typetests__/common/useAnimatedPropsTest.tsx b/packages/react-native-reanimated/__typetests__/common/useAnimatedPropsTest.tsx index 0d2c948db5f..6999098c899 100644 --- a/packages/react-native-reanimated/__typetests__/common/useAnimatedPropsTest.tsx +++ b/packages/react-native-reanimated/__typetests__/common/useAnimatedPropsTest.tsx @@ -41,7 +41,7 @@ function UseAnimatedPropsTest() { function UseAnimatedPropsTestView1() { const animatedProps = useAnimatedProps( - () => ({ pointerEvents: 'none' } as const) + () => ({ pointerEvents: 'none' }) as const ); return ; } diff --git a/packages/react-native-reanimated/package.json b/packages/react-native-reanimated/package.json index 60e24a47a2d..ef3b6701c8c 100644 --- a/packages/react-native-reanimated/package.json +++ b/packages/react-native-reanimated/package.json @@ -142,7 +142,7 @@ "eslint-plugin-tsdoc": "^0.2.17", "jest": "^29.0.0", "madge": "^5.0.1", - "prettier": "2.8.8", + "prettier": "^3.3.3", "react": "18.3.1", "react-native": "0.75.2", "react-native-builder-bob": "^0.18.3", diff --git a/packages/react-native-reanimated/plugin/package.json b/packages/react-native-reanimated/plugin/package.json index 0d95b6979c0..8fa29cb06cf 100644 --- a/packages/react-native-reanimated/plugin/package.json +++ b/packages/react-native-reanimated/plugin/package.json @@ -17,7 +17,7 @@ "esbuild": "^0.17.11", "eslint": "^8.0.0-0", "eslint-plugin-standard": "^5.0.0", - "prettier": "^2.5.1", + "prettier": "^3.3.3", "tsc-watch": "^6.0.0", "typescript": "^4.1.3" }, diff --git a/packages/react-native-reanimated/plugin/src/autoworkletization.ts b/packages/react-native-reanimated/plugin/src/autoworkletization.ts index d54cefadaee..b37ef7ce7f3 100644 --- a/packages/react-native-reanimated/plugin/src/autoworkletization.ts +++ b/packages/react-native-reanimated/plugin/src/autoworkletization.ts @@ -58,10 +58,7 @@ const functionArgsToWorkletize = new Map([ ['executeOnUIRuntimeSync', [0]], ]); -/** - * - * @returns `true` if the function was workletized, `false` otherwise. - */ +/** @returns `true` if the function was workletized, `false` otherwise. */ export function processIfAutoworkletizableCallback( path: NodePath, state: ReanimatedPluginPass @@ -87,8 +84,8 @@ export function processCalleesAutoworkletizableCallbacks( 'name' in callee ? callee.name : 'property' in callee && 'name' in callee.property - ? callee.property.name - : undefined; + ? callee.property.name + : undefined; if (name === undefined) { return; } diff --git a/packages/react-native-reanimated/plugin/src/class.ts b/packages/react-native-reanimated/plugin/src/class.ts index 88e5dd1c8ab..25b97331cca 100644 --- a/packages/react-native-reanimated/plugin/src/class.ts +++ b/packages/react-native-reanimated/plugin/src/class.ts @@ -124,10 +124,13 @@ function appendWorkletDirectiveToPolyfills(statements: Statement[]) { /** * Replaces + * * ```ts * const Clazz = ...; * ``` - * with + * + * With + * * ```ts * const Clazz__classFactory = ...; * const Clazz = Clazz__classFactory(); @@ -312,8 +315,8 @@ function recursiveTopoSort( } /** - * Checks if an identifier is a reference to an outside dependency. - * The condition was made by trial and error. + * Checks if an identifier is a reference to an outside dependency. The + * condition was made by trial and error. */ function isOutsideDependency( identifierPath: NodePath, diff --git a/packages/react-native-reanimated/plugin/src/file.ts b/packages/react-native-reanimated/plugin/src/file.ts index 86f7cbd2097..3e8fc1f210f 100644 --- a/packages/react-native-reanimated/plugin/src/file.ts +++ b/packages/react-native-reanimated/plugin/src/file.ts @@ -55,9 +55,7 @@ export function processIfWorkletFile( return true; } -/** - * Adds a worklet directive to each viable top-level entity in the file. - */ +/** Adds a worklet directive to each viable top-level entity in the file. */ function processWorkletFile(programPath: NodePath) { const statements = programPath.get('body'); dehoistCommonJSExports(programPath.node); @@ -126,7 +124,8 @@ function processWorkletAggregator(objectPath: NodePath) { * * `() => 1` becomes `() => { return 1 }` * - * This is necessary because the worklet directive is only allowed on block statements. + * This is necessary because the worklet directive is only allowed on block + * statements. */ function replaceImplicitReturnWithBlock(path: ArrowFunctionExpression) { if (!isBlockStatement(path.body)) { diff --git a/packages/react-native-reanimated/plugin/src/globals.ts b/packages/react-native-reanimated/plugin/src/globals.ts index 3eb1fcbfacd..65e281d1d4c 100644 --- a/packages/react-native-reanimated/plugin/src/globals.ts +++ b/packages/react-native-reanimated/plugin/src/globals.ts @@ -121,11 +121,11 @@ const notCapturedIdentifiers = [ ]; /** - * @deprecated Since we moved on to using `global.` prefix in Reanimated, we don't need to - * capture these identifiers anymore. However, for safety reasons and 3rd party libraries, - * we still keep them in the list. + * @deprecated Since we moved on to using `global.` prefix in Reanimated, we + * don't need to capture these identifiers anymore. However, for safety + * reasons and 3rd party libraries, we still keep them in the list. * - * `_WORKLET` is the only exception since it's a part of the public API. + * `_WORKLET` is the only exception since it's a part of the public API. */ // eslint-disable-next-line camelcase const notCapturedIdentifiers_DEPRECATED = [ diff --git a/packages/react-native-reanimated/plugin/src/utils.ts b/packages/react-native-reanimated/plugin/src/utils.ts index c2eda0d451d..0f9b9d3fec0 100644 --- a/packages/react-native-reanimated/plugin/src/utils.ts +++ b/packages/react-native-reanimated/plugin/src/utils.ts @@ -19,10 +19,16 @@ export function isRelease() { } /** - * This function allows to add custom globals such as host-functions. - * Those globals have to be passed as an argument for the plugin in babel.config.js. + * This function allows to add custom globals such as host-functions. Those + * globals have to be passed as an argument for the plugin in babel.config.js. * - * For example: `plugins: [['react-native-reanimated/plugin', { globals: ['myHostFunction'] }]]` + * For example: + * + * ```js + * plugins: [ + * ['react-native-reanimated/plugin', { globals: ['myHostFunction'] }], + * ]; + * ``` */ export function addCustomGlobals(this: ReanimatedPluginPass) { if (this.opts && Array.isArray(this.opts.globals)) { @@ -33,34 +39,38 @@ export function addCustomGlobals(this: ReanimatedPluginPass) { } /** - * This function replaces the node with a factory call while making - * sure that it's a legal operation. - * If the node cannot be simply replaced with a factory call, it will - * be replaced with a variable declaration. + * This function replaces the node with a factory call while making sure that + * it's a legal operation. If the node cannot be simply replaced with a factory + * call, it will be replaced with a variable declaration. * * For example: + * * ```ts - * const foo = function() { - * 'worklet'; - * return 1; - * }; + * const foo = function () { + * 'worklet'; + * return 1; + * }; * ``` - * becomes + * + * Becomes + * * ```ts - * const foo = factoryCall(); + * const foo = factoryCall(); * ``` + * * But: - * ``` - * export function foo() { - * 'worklet'; - * return 1; - * }; + * + * ```ts + * export function foo() { + * 'worklet'; + * return 1; + * } * ``` * - * becomes + * Becomes * * ```ts - * export const foo = factoryCall(); + * export const foo = factoryCall(); * ``` */ export function replaceWithFactoryCall( diff --git a/packages/react-native-reanimated/plugin/src/workletStringCode.ts b/packages/react-native-reanimated/plugin/src/workletStringCode.ts index c7566d35235..113ee52f133 100644 --- a/packages/react-native-reanimated/plugin/src/workletStringCode.ts +++ b/packages/react-native-reanimated/plugin/src/workletStringCode.ts @@ -161,7 +161,8 @@ export function buildWorkletString( } /** - * Function that restores recursive calls after the name of the worklet has changed. + * Function that restores recursive calls after the name of the worklet has + * changed. */ function restoreRecursiveCalls(file: BabelFile, newName: string): void { traverse(file, { diff --git a/packages/react-native-reanimated/plugin/src/workletSubstitution.ts b/packages/react-native-reanimated/plugin/src/workletSubstitution.ts index b688f65242c..6975282bae5 100644 --- a/packages/react-native-reanimated/plugin/src/workletSubstitution.ts +++ b/packages/react-native-reanimated/plugin/src/workletSubstitution.ts @@ -10,10 +10,7 @@ import { WorkletizableFunction } from './types'; import { replaceWithFactoryCall } from './utils'; import { makeWorkletFactoryCall } from './workletFactoryCall'; -/** - * - * @returns `true` if the function was workletized, `false` otherwise. - */ +/** @returns `true` if the function was workletized, `false` otherwise. */ export function processIfWithWorkletDirective( path: NodePath, state: ReanimatedPluginPass @@ -33,12 +30,13 @@ export function processIfWithWorkletDirective( /** * Replaces + * * - `FunctionDeclaration`, * - `FunctionExpression`, * - `ArrowFunctionExpression` * - `ObjectMethod` * - * with a workletized version of itself. + * With a workletized version of itself. */ export function processWorklet( path: NodePath, diff --git a/packages/react-native-reanimated/src/Animated.ts b/packages/react-native-reanimated/src/Animated.ts index bc84238b501..09c3dfeaf98 100644 --- a/packages/react-native-reanimated/src/Animated.ts +++ b/packages/react-native-reanimated/src/Animated.ts @@ -29,55 +29,68 @@ export { addWhitelistedUIProps, } from './ConfigHelper'; /** - * @deprecated Please import `Extrapolate` directly from `react-native-reanimated` instead of `Animated` namespace. + * @deprecated Please import `Extrapolate` directly from + * `react-native-reanimated` instead of `Animated` namespace. */ export type Extrapolate = typeof _Extrapolate; /** - * @deprecated Please import `SharedValue` directly from `react-native-reanimated` instead of `Animated` namespace. + * @deprecated Please import `SharedValue` directly from + * `react-native-reanimated` instead of `Animated` namespace. */ export type SharedValue = _SharedValue; /** - * @deprecated Please import `DerivedValue` directly from `react-native-reanimated` instead of `Animated` namespace. + * @deprecated Please import `DerivedValue` directly from + * `react-native-reanimated` instead of `Animated` namespace. */ export type DerivedValue = _DerivedValue; /** - * @deprecated Please import `Adaptable` directly from `react-native-reanimated` instead of `Animated` namespace. + * @deprecated Please import `Adaptable` directly from `react-native-reanimated` + * instead of `Animated` namespace. */ export type Adaptable = _Adaptable; /** - * @deprecated Please import `TransformStyleTypes` directly from `react-native-reanimated` instead of `Animated` namespace. - * */ + * @deprecated Please import `TransformStyleTypes` directly from + * `react-native-reanimated` instead of `Animated` namespace. + */ export type TransformStyleTypes = _TransformStyleTypes; /** - * @deprecated Please import `AdaptTransforms` directly from `react-native-reanimated` instead of `Animated` namespace. - * */ + * @deprecated Please import `AdaptTransforms` directly from + * `react-native-reanimated` instead of `Animated` namespace. + */ export type AdaptTransforms = _AdaptTransforms; /** - * @deprecated Please import `AnimatedTransform` directly from `react-native-reanimated` instead of `Animated` namespace. + * @deprecated Please import `AnimatedTransform` directly from + * `react-native-reanimated` instead of `Animated` namespace. */ export type AnimatedTransform = _AnimatedTransform; /** - * @deprecated Please import `AnimateStyle` directly from `react-native-reanimated` instead of `Animated` namespace. - * */ + * @deprecated Please import `AnimateStyle` directly from + * `react-native-reanimated` instead of `Animated` namespace. + */ export type AnimateStyle = _AnimateStyle; /** - * @deprecated Please import `StylesOrDefault` directly from `react-native-reanimated` instead of `Animated` namespace. - * */ + * @deprecated Please import `StylesOrDefault` directly from + * `react-native-reanimated` instead of `Animated` namespace. + */ export type StylesOrDefault = _StylesOrDefault; /** - * @deprecated Please import `AnimateProps` directly from `react-native-reanimated` instead of `Animated` namespace. - * */ + * @deprecated Please import `AnimateProps` directly from + * `react-native-reanimated` instead of `Animated` namespace. + */ export type AnimateProps

= _AnimateProps

; /** - * @deprecated Please import `EasingFunction` directly from `react-native-reanimated` instead of `Animated` namespace. - * */ + * @deprecated Please import `EasingFunction` directly from + * `react-native-reanimated` instead of `Animated` namespace. + */ export type EasingFunction = _EasingFunction; /** - * @deprecated Please import `AnimatedScrollViewProps` directly from `react-native-reanimated` instead of `Animated` namespace. - * */ + * @deprecated Please import `AnimatedScrollViewProps` directly from + * `react-native-reanimated` instead of `Animated` namespace. + */ export type AnimatedScrollViewProps = _AnimatedScrollViewProps; /** - * @deprecated Please import `FlatListPropsWithLayout` directly from `react-native-reanimated` instead of `Animated` namespace. - * */ + * @deprecated Please import `FlatListPropsWithLayout` directly from + * `react-native-reanimated` instead of `Animated` namespace. + */ export type FlatListPropsWithLayout = _FlatListPropsWithLayout; diff --git a/packages/react-native-reanimated/src/Bezier.ts b/packages/react-native-reanimated/src/Bezier.ts index 3968f3a689c..42042f4d8cb 100644 --- a/packages/react-native-reanimated/src/Bezier.ts +++ b/packages/react-native-reanimated/src/Bezier.ts @@ -3,9 +3,8 @@ import { ReanimatedError } from './errors'; /** - * https://github.com/gre/bezier-easing - * BezierEasing - use bezier curve for transition easing function - * by Gaëtan Renaudeau 2014 - 2015 – MIT License + * https://github.com/gre/bezier-easing BezierEasing - use bezier curve for + * transition easing function by Gaëtan Renaudeau 2014 - 2015 – MIT License */ // These values are established by empiricism with tests (tradeoff: performance VS precision) diff --git a/packages/react-native-reanimated/src/Colors.ts b/packages/react-native-reanimated/src/Colors.ts index 61fbed71511..a2b3dd08e94 100644 --- a/packages/react-native-reanimated/src/Colors.ts +++ b/packages/react-native-reanimated/src/Colors.ts @@ -1,7 +1,6 @@ 'use strict'; /** - * Copied from: - * react-native/Libraries/StyleSheet/normalizeColor.js + * Copied from: react-native/Libraries/StyleSheet/normalizeColor.js * react-native/Libraries/StyleSheet/processColor.js * https://github.com/wcandillon/react-native-redash/blob/master/src/Colors.ts */ @@ -524,11 +523,10 @@ export const rgbaColor = ( }; /** - * - * @param r - red value (0-255) - * @param g - green value (0-255) - * @param b - blue value (0-255) - * @returns \{h: hue (0-1), s: saturation (0-1), v: value (0-1)\} + * @param r - Red value (0-255) + * @param g - Green value (0-255) + * @param b - Blue value (0-255) + * @returns `{h: hue (0-1), s: saturation (0-1), v: value (0-1)}` */ export function RGBtoHSV(r: number, g: number, b: number): HSV { 'worklet'; @@ -561,11 +559,10 @@ export function RGBtoHSV(r: number, g: number, b: number): HSV { } /** - * - * @param h - hue (0-1) - * @param s - saturation (0-1) - * @param v - value (0-1) - * @returns \{r: red (0-255), g: green (0-255), b: blue (0-255)\} + * @param h - Hue (0-1) + * @param s - Saturation (0-1) + * @param v - Value (0-1) + * @returns `{r: red (0-255), g: green (0-255), b: blue (0-255)}` */ function HSVtoRGB(h: number, s: number, v: number): RGB { 'worklet'; diff --git a/packages/react-native-reanimated/src/ConfigHelper.ts b/packages/react-native-reanimated/src/ConfigHelper.ts index 95989f39c91..16586ad0e4e 100644 --- a/packages/react-native-reanimated/src/ConfigHelper.ts +++ b/packages/react-native-reanimated/src/ConfigHelper.ts @@ -68,8 +68,8 @@ export interface ViewConfig { validAttributes: Record; } /** - * updates UI props whitelist for given view host instance - * this will work just once for every view name + * Updates UI props whitelist for given view host instance this will work just + * once for every view name */ export function adaptViewConfig(viewConfig: ViewConfig): void { diff --git a/packages/react-native-reanimated/src/Easing.ts b/packages/react-native-reanimated/src/Easing.ts index 4f50e958c7f..351ad7218f5 100644 --- a/packages/react-native-reanimated/src/Easing.ts +++ b/packages/react-native-reanimated/src/Easing.ts @@ -15,8 +15,8 @@ import type { EasingFunction } from './commonTypes'; * The `Easing` module provides several predefined animations through the * following methods: * - * - [`back`](docs/easing.html#back) provides a simple animation where the - * object goes slightly back before moving forward + * - [`back`](docs/easing.html#back) provides a simple animation where the object + * goes slightly back before moving forward * - [`bounce`](docs/easing.html#bounce) provides a bouncing animation * - [`ease`](docs/easing.html#ease) provides a simple inertial animation * - [`elastic`](docs/easing.html#elastic) provides a simple spring interaction @@ -48,16 +48,12 @@ import type { EasingFunction } from './commonTypes'; * - [`out`](docs/easing.html#out) runs an easing function backwards */ -/** - * @deprecated Please use {@link EasingFunction} type instead. - */ +/** @deprecated Please use {@link EasingFunction} type instead. */ export type EasingFn = EasingFunction; export type EasingFunctionFactory = { factory: () => EasingFunction }; -/** - * @deprecated Please use {@link EasingFunctionFactory} type instead. - */ +/** @deprecated Please use {@link EasingFunctionFactory} type instead. */ export type EasingFactoryFn = EasingFunctionFactory; /** * A linear function, `f(t) = t`. Position correlates to elapsed time one to @@ -106,8 +102,7 @@ function cubic(t: number): number { /** * A power function. Position is equal to the Nth power of elapsed time. * - * n = 4: http://easings.net/#easeInQuart - * n = 5: http://easings.net/#easeInQuint + * N = 4: http://easings.net/#easeInQuart n = 5: http://easings.net/#easeInQuint */ function poly(n: number): EasingFunction { 'worklet'; @@ -148,11 +143,10 @@ function exp(t: number): number { } /** - * A simple elastic interaction, similar to a spring oscillating back and - * forth. + * A simple elastic interaction, similar to a spring oscillating back and forth. * * Default bounciness is 1, which overshoots a little bit once. 0 bounciness - * doesn't overshoot at all, and bounciness of N \> 1 will overshoot about N + * doesn't overshoot at all, and bounciness of N `>` 1 will overshoot about N * times. * * http://easings.net/#easeInElastic @@ -239,17 +233,13 @@ function bezierFn( return Bezier(x1, y1, x2, y2); } -/** - * Runs an easing function forwards. - */ +/** Runs an easing function forwards. */ function in_(easing: EasingFunction): EasingFunction { 'worklet'; return easing; } -/** - * Runs an easing function backwards. - */ +/** Runs an easing function backwards. */ function out(easing: EasingFunction): EasingFunction { 'worklet'; return (t) => { @@ -259,9 +249,8 @@ function out(easing: EasingFunction): EasingFunction { } /** - * Makes any easing function symmetrical. The easing function will run - * forwards for half of the duration, then backwards for the rest of the - * duration. + * Makes any easing function symmetrical. The easing function will run forwards + * for half of the duration, then backwards for the rest of the duration. */ function inOut(easing: EasingFunction): EasingFunction { 'worklet'; @@ -275,10 +264,11 @@ function inOut(easing: EasingFunction): EasingFunction { } /** - * The `steps` easing function jumps between discrete values at regular intervals, - * creating a stepped animation effect. The `n` parameter determines the number of - * steps in the animation, and the `roundToNextStep` parameter determines whether the animation - * should start at the beginning or end of each step. + * The `steps` easing function jumps between discrete values at regular + * intervals, creating a stepped animation effect. The `n` parameter determines + * the number of steps in the animation, and the `roundToNextStep` parameter + * determines whether the animation should start at the beginning or end of each + * step. */ function steps(n = 10, roundToNextStep = true): EasingFunction { 'worklet'; diff --git a/packages/react-native-reanimated/src/UpdateLayoutAnimations.ts b/packages/react-native-reanimated/src/UpdateLayoutAnimations.ts index 2c34153adf6..1dd889ea60b 100644 --- a/packages/react-native-reanimated/src/UpdateLayoutAnimations.ts +++ b/packages/react-native-reanimated/src/UpdateLayoutAnimations.ts @@ -41,14 +41,23 @@ function createUpdateManager() { } /** - * Lets you update the current configuration of the layout animation or shared element transition for a given component. - * Configurations are batched and applied at the end of the current execution block, right before sending the response back to native. + * Lets you update the current configuration of the layout animation or shared + * element transition for a given component. Configurations are batched and + * applied at the end of the current execution block, right before sending the + * response back to native. * * @param viewTag - The tag of the component you'd like to configure. - * @param type - The type of the animation you'd like to configure - {@link LayoutAnimationType}. - * @param config - The animation configuration - {@link LayoutAnimationFunction}, {@link SharedTransitionAnimationsFunction}, {@link ProgressAnimationCallback} or {@link Keyframe}. Passing `undefined` will remove the animation. - * @param sharedTransitionTag - The tag of the shared element transition you'd like to configure. Passing `undefined` will remove the transition. - * @param isUnmounting - Determines whether the configuration should be included at the end of the batch, after all the non-deferred configurations (even those that were updated later). This is used to retain the correct ordering of shared elements. Defaults to `false`. + * @param type - The type of the animation you'd like to configure - + * {@link LayoutAnimationType}. + * @param config - The animation configuration - {@link LayoutAnimationFunction}, + * {@link SharedTransitionAnimationsFunction}, {@link ProgressAnimationCallback} + * or {@link Keyframe}. Passing `undefined` will remove the animation. + * @param sharedTransitionTag - The tag of the shared element transition you'd + * like to configure. Passing `undefined` will remove the transition. + * @param isUnmounting - Determines whether the configuration should be included + * at the end of the batch, after all the non-deferred configurations (even + * those that were updated later). This is used to retain the correct ordering + * of shared elements. Defaults to `false`. */ export let updateLayoutAnimations: ( viewTag: number, diff --git a/packages/react-native-reanimated/src/animation/clamp.ts b/packages/react-native-reanimated/src/animation/clamp.ts index 7af1653f482..b6ff6607bb3 100644 --- a/packages/react-native-reanimated/src/animation/clamp.ts +++ b/packages/react-native-reanimated/src/animation/clamp.ts @@ -104,9 +104,10 @@ export const withClamp = function ( animationToClamp.onStart( animationToClamp, - /** provide the current value of the previous animation of the clamped animation - so we can animate from the original "un-truncated" value - */ + /** + * Provide the current value of the previous animation of the clamped + * animation so we can animate from the original "un-truncated" value + */ animationBeforeClamped?.current || value, now, animationBeforeClamped diff --git a/packages/react-native-reanimated/src/animation/decay/decay.ts b/packages/react-native-reanimated/src/animation/decay/decay.ts index 104bda4b085..9e6d5078aa0 100644 --- a/packages/react-native-reanimated/src/animation/decay/decay.ts +++ b/packages/react-native-reanimated/src/animation/decay/decay.ts @@ -56,8 +56,11 @@ function validateConfig(config: DefaultDecayConfig): void { * Lets you create animations that mimic objects in motion with friction. * * @param config - The decay animation configuration - {@link DecayConfig}. - * @param callback - A function called upon animation completion - {@link AnimationCallback}. - * @returns An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation. + * @param callback - A function called upon animation completion - + * {@link AnimationCallback}. + * @returns An [animation + * object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) + * which holds the current state of the animation. * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withDecay */ export const withDecay = function ( diff --git a/packages/react-native-reanimated/src/animation/decay/utils.ts b/packages/react-native-reanimated/src/animation/decay/utils.ts index deb18ccd886..8d9afc5ff45 100644 --- a/packages/react-native-reanimated/src/animation/decay/utils.ts +++ b/packages/react-native-reanimated/src/animation/decay/utils.ts @@ -32,12 +32,18 @@ export interface InnerDecayAnimation * The decay animation configuration. * * @param velocity - Initial velocity of the animation. Defaults to 0. - * @param deceleration - The rate at which the velocity decreases over time. Defaults to 0.998. - * @param clamp - Array of two numbers which restricts animation's range. Defaults to []. + * @param deceleration - The rate at which the velocity decreases over time. + * Defaults to 0.998. + * @param clamp - Array of two numbers which restricts animation's range. + * Defaults to []. * @param velocityFactor - Velocity multiplier. Defaults to 1. - * @param rubberBandEffect - Makes the animation bounce over the limit specified in `clamp`. Defaults to `false`. - * @param rubberBandFactor - Strength of the rubber band effect. Defaults to 0.6. - * @param reduceMotion - Determines how the animation responds to the device's reduced motion accessibility setting. Default to `ReduceMotion.System` - {@link ReduceMotion}. + * @param rubberBandEffect - Makes the animation bounce over the limit specified + * in `clamp`. Defaults to `false`. + * @param rubberBandFactor - Strength of the rubber band effect. Defaults to + * 0.6. + * @param reduceMotion - Determines how the animation responds to the device's + * reduced motion accessibility setting. Default to `ReduceMotion.System` - + * {@link ReduceMotion}. * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withDecay#config */ export type DecayConfig = { diff --git a/packages/react-native-reanimated/src/animation/delay.ts b/packages/react-native-reanimated/src/animation/delay.ts index d5dac1a4339..3839bfb9a72 100644 --- a/packages/react-native-reanimated/src/animation/delay.ts +++ b/packages/react-native-reanimated/src/animation/delay.ts @@ -21,8 +21,12 @@ type withDelayType = ( * * @param delayMs - Duration (in milliseconds) before the animation starts. * @param nextAnimation - The animation to delay. - * @param reduceMotion - Determines how the animation responds to the device's reduced motion accessibility setting. Default to `ReduceMotion.System` - {@link ReduceMotion}. - * @returns An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation. + * @param reduceMotion - Determines how the animation responds to the device's + * reduced motion accessibility setting. Default to `ReduceMotion.System` - + * {@link ReduceMotion}. + * @returns An [animation + * object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) + * which holds the current state of the animation. * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withDelay */ export const withDelay = function ( diff --git a/packages/react-native-reanimated/src/animation/repeat.ts b/packages/react-native-reanimated/src/animation/repeat.ts index 36721a45d4c..bb8fb1a5f38 100644 --- a/packages/react-native-reanimated/src/animation/repeat.ts +++ b/packages/react-native-reanimated/src/animation/repeat.ts @@ -23,11 +23,17 @@ type withRepeatType = ( * Lets you repeat an animation given number of times or run it indefinitely. * * @param animation - An animation object you want to repeat. - * @param numberOfReps - The number of times the animation is going to be repeated. Defaults to 2. - * @param reverse - Whether the animation should run in reverse every other repetition. Defaults to false. + * @param numberOfReps - The number of times the animation is going to be + * repeated. Defaults to 2. + * @param reverse - Whether the animation should run in reverse every other + * repetition. Defaults to false. * @param callback - A function called on animation complete. - * @param reduceMotion - Determines how the animation responds to the device's reduced motion accessibility setting. Default to `ReduceMotion.System` - {@link ReduceMotion}. - * @returns An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation. + * @param reduceMotion - Determines how the animation responds to the device's + * reduced motion accessibility setting. Default to `ReduceMotion.System` - + * {@link ReduceMotion}. + * @returns An [animation + * object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) + * which holds the current state of the animation. * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withRepeat */ export const withRepeat = function ( diff --git a/packages/react-native-reanimated/src/animation/sequence.ts b/packages/react-native-reanimated/src/animation/sequence.ts index 05077ca4039..a436e922822 100644 --- a/packages/react-native-reanimated/src/animation/sequence.ts +++ b/packages/react-native-reanimated/src/animation/sequence.ts @@ -13,9 +13,13 @@ import { logger } from '../logger'; /** * Lets you run animations in a sequence. * - * @param reduceMotion - Determines how the animation responds to the device's reduced motion accessibility setting. Default to `ReduceMotion.System` - {@link ReduceMotion}. + * @param reduceMotion - Determines how the animation responds to the device's + * reduced motion accessibility setting. Default to `ReduceMotion.System` - + * {@link ReduceMotion}. * @param animations - Any number of animation objects to be run in a sequence. - * @returns An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation/ + * @returns An [animation + * object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) + * which holds the current state of the animation/ * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withSequence */ export function withSequence( diff --git a/packages/react-native-reanimated/src/animation/spring.ts b/packages/react-native-reanimated/src/animation/spring.ts index 68dcf4410a7..2362df8f9ed 100644 --- a/packages/react-native-reanimated/src/animation/spring.ts +++ b/packages/react-native-reanimated/src/animation/spring.ts @@ -33,10 +33,14 @@ type withSpringType = ( /** * Lets you create spring-based animations. * - * @param toValue - the value at which the animation will come to rest - {@link AnimatableValue} - * @param config - the spring animation configuration - {@link SpringConfig} - * @param callback - a function called on animation complete - {@link AnimationCallback} - * @returns an [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation + * @param toValue - The value at which the animation will come to rest - + * {@link AnimatableValue} + * @param config - The spring animation configuration - {@link SpringConfig} + * @param callback - A function called on animation complete - + * {@link AnimationCallback} + * @returns An [animation + * object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) + * which holds the current state of the animation * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring */ export const withSpring = (( diff --git a/packages/react-native-reanimated/src/animation/springUtils.ts b/packages/react-native-reanimated/src/animation/springUtils.ts index fb8d29f72c8..7adb7e3bd22 100644 --- a/packages/react-native-reanimated/src/animation/springUtils.ts +++ b/packages/react-native-reanimated/src/animation/springUtils.ts @@ -10,16 +10,27 @@ import { logger } from '../logger'; /** * Spring animation configuration. * - * @param mass - The weight of the spring. Reducing this value makes the animation faster. Defaults to 1. - * @param damping - How quickly a spring slows down. Higher damping means the spring will come to rest faster. Defaults to 10. - * @param duration - Length of the animation (in milliseconds). Defaults to 2000. - * @param dampingRatio - How damped the spring is. Value 1 means the spring is critically damped, and value \>1 means the spring is overdamped. Defaults to 0.5. + * @param mass - The weight of the spring. Reducing this value makes the + * animation faster. Defaults to 1. + * @param damping - How quickly a spring slows down. Higher damping means the + * spring will come to rest faster. Defaults to 10. + * @param duration - Length of the animation (in milliseconds). Defaults to + * 2000. + * @param dampingRatio - How damped the spring is. Value 1 means the spring is + * critically damped, and value `>`1 means the spring is overdamped. Defaults + * to 0.5. * @param stiffness - How bouncy the spring is. Defaults to 100. - * @param velocity - Initial velocity applied to the spring equation. Defaults to 0. - * @param overshootClamping - Whether a spring can bounce over the `toValue`. Defaults to false. - * @param restDisplacementThreshold - The displacement below which the spring will snap to toValue without further oscillations. Defaults to 0.01. - * @param restSpeedThreshold - The speed in pixels per second from which the spring will snap to toValue without further oscillations. Defaults to 2. - * @param reduceMotion - Determines how the animation responds to the device's reduced motion accessibility setting. Default to `ReduceMotion.System` - {@link ReduceMotion}. + * @param velocity - Initial velocity applied to the spring equation. Defaults + * to 0. + * @param overshootClamping - Whether a spring can bounce over the `toValue`. + * Defaults to false. + * @param restDisplacementThreshold - The displacement below which the spring + * will snap to toValue without further oscillations. Defaults to 0.01. + * @param restSpeedThreshold - The speed in pixels per second from which the + * spring will snap to toValue without further oscillations. Defaults to 2. + * @param reduceMotion - Determines how the animation responds to the device's + * reduced motion accessibility setting. Default to `ReduceMotion.System` - + * {@link ReduceMotion}. * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring/#config- */ export type SpringConfig = { @@ -161,8 +172,10 @@ export function initialCalculations( if (config.useDuration) { const { stiffness: k, dampingRatio: zeta } = config; - /** omega0 and omega1 denote angular frequency and natural angular frequency, see this link for formulas: - * https://courses.lumenlearning.com/suny-osuniversityphysics/chapter/15-5-damped-oscillations/ + /** + * Omega0 and omega1 denote angular frequency and natural angular frequency, + * see this link for formulas: + * https://courses.lumenlearning.com/suny-osuniversityphysics/chapter/15-5-damped-oscillations/ */ const omega0 = Math.sqrt(k / mass); const omega1 = omega0 * Math.sqrt(1 - zeta ** 2); @@ -179,8 +192,10 @@ export function initialCalculations( } } -/** We make an assumption that we can manipulate zeta without changing duration of movement. - * According to theory this change is small and tests shows that we can indeed ignore it. +/** + * We make an assumption that we can manipulate zeta without changing duration + * of movement. According to theory this change is small and tests shows that we + * can indeed ignore it. */ export function scaleZetaToMatchClamps( animation: SpringAnimation, @@ -199,13 +214,15 @@ export function scaleZetaToMatchClamps( ? [clamp.min, clamp.max] : [clamp.max, clamp.min]; - /** The extrema we get from equation below are relative (we obtain a ratio), - * To get absolute extrema we convert it as follows: + /** + * The extrema we get from equation below are relative (we obtain a ratio), To + * get absolute extrema we convert it as follows: + * + * AbsoluteExtremum = startValue ± RelativeExtremum * (toValue - startValue) + * Where ± denotes: * - * AbsoluteExtremum = startValue ± RelativeExtremum * (toValue - startValue) - * Where ± denotes: - * + if extremum is over the target - * - otherwise + * - If extremum is over the target + * - Otherwise */ const relativeExtremum1 = @@ -218,10 +235,11 @@ export function scaleZetaToMatchClamps( ? Math.abs((firstBound - toValueNum) / (toValueNum - startValue)) : undefined; - /** Use this formula http://hyperphysics.phy-astr.gsu.edu/hbase/oscda.html to calculate - * first two extrema. These extrema are located where cos = +- 1 + /** + * Use this formula http://hyperphysics.phy-astr.gsu.edu/hbase/oscda.html to + * calculate first two extrema. These extrema are located where cos = +- 1 * - * Therefore the first two extrema are: + * Therefore the first two extrema are: * * Math.exp(-zeta * Math.PI); (over the target) * Math.exp(-zeta * 2 * Math.PI); (before the target) @@ -256,24 +274,27 @@ export function calculateNewMassToMatchDuration( return 0; } - /** Use this formula: https://phys.libretexts.org/Bookshelves/University_Physics/Book%3A_University_Physics_(OpenStax)/Book%3A_University_Physics_I_-_Mechanics_Sound_Oscillations_and_Waves_(OpenStax)/15%3A_Oscillations/15.06%3A_Damped_Oscillations - * to find the asymptote and estimate the damping that gives us the expected duration - - ⎛ ⎛ c⎞ ⎞ - ⎜-⎜──⎟ ⋅ duration⎟ - ⎝ ⎝2m⎠ ⎠ - A ⋅ e = threshold - - - Amplitude calculated using "Conservation of energy" - _________________ - ╱ 2 2 - ╱ m ⋅ v0 + k ⋅ x0 - amplitude = ╱ ───────────────── - ╲╱ k - - And replace mass with damping ratio which is provided: m = (c^2)/(4 * k * zeta^2) - */ + /** + * Use this formula: + * https://phys.libretexts.org/Bookshelves/University_Physics/Book%3A_University_Physics_(OpenStax)/Book%3A_University_Physics_I_-_Mechanics_Sound_Oscillations_and_Waves_(OpenStax)/15%3A_Oscillations/15.06%3A_Damped_Oscillations + * to find the asymptote and estimate the damping that gives us the expected + * duration + * + * ⎛ ⎛ c⎞ ⎞ + * ⎜-⎜──⎟ ⋅ duration⎟ + * ⎝ ⎝2m⎠ ⎠ + * A ⋅ e = threshold + * + * + * Amplitude calculated using "Conservation of energy" + * _________________ + * ╱ 2 2 + * ╱ m ⋅ v0 + k ⋅ x0 + * amplitude = ╱ ───────────────── + * ╲╱ k + * + * And replace mass with damping ratio which is provided: m = (c^2)/(4 * k * zeta^2) + */ const { stiffness: k, dampingRatio: zeta, diff --git a/packages/react-native-reanimated/src/animation/timing.ts b/packages/react-native-reanimated/src/animation/timing.ts index 8c3745627af..48fe9cf03d6 100644 --- a/packages/react-native-reanimated/src/animation/timing.ts +++ b/packages/react-native-reanimated/src/animation/timing.ts @@ -19,8 +19,11 @@ import type { * The timing animation configuration. * * @param duration - Length of the animation (in milliseconds). Defaults to 300. - * @param easing - An easing function which defines the animation curve. Defaults to `Easing.inOut(Easing.quad)`. - * @param reduceMotion - Determines how the animation responds to the device's reduced motion accessibility setting. Default to `ReduceMotion.System` - {@link ReduceMotion}. + * @param easing - An easing function which defines the animation curve. + * Defaults to `Easing.inOut(Easing.quad)`. + * @param reduceMotion - Determines how the animation responds to the device's + * reduced motion accessibility setting. Default to `ReduceMotion.System` - + * {@link ReduceMotion}. * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withTiming#config- */ interface TimingConfig { @@ -57,10 +60,14 @@ type withTimingType = ( /** * Lets you create an animation based on duration and easing. * - * @param toValue - The value on which the animation will come at rest - {@link AnimatableValue}. + * @param toValue - The value on which the animation will come at rest - + * {@link AnimatableValue}. * @param config - The timing animation configuration - {@link TimingConfig}. - * @param callback - A function called on animation complete - {@link AnimationCallback}. - * @returns An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation. + * @param callback - A function called on animation complete - + * {@link AnimationCallback}. + * @returns An [animation + * object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) + * which holds the current state of the animation. * @see https://docs.swmansion.com/react-native-reanimated/docs/animations/withTiming */ export const withTiming = function ( diff --git a/packages/react-native-reanimated/src/animation/transformationMatrix/matrixUtils.tsx b/packages/react-native-reanimated/src/animation/transformationMatrix/matrixUtils.tsx index 5f107066fe4..c012c8a95cc 100644 --- a/packages/react-native-reanimated/src/animation/transformationMatrix/matrixUtils.tsx +++ b/packages/react-native-reanimated/src/animation/transformationMatrix/matrixUtils.tsx @@ -5,7 +5,7 @@ import { ReanimatedError } from '../../errors'; type FixedLengthArray< T, L extends number, - PassedObject = [T, ...Array] + PassedObject = [T, ...Array], > = PassedObject & { readonly length: L; [I: number]: T; diff --git a/packages/react-native-reanimated/src/animation/util.ts b/packages/react-native-reanimated/src/animation/util.ts index 8211e818c21..0446d142532 100644 --- a/packages/react-native-reanimated/src/animation/util.ts +++ b/packages/react-native-reanimated/src/animation/util.ts @@ -108,8 +108,8 @@ export function recognizePrefixSuffix( } /** - * Returns whether the motion should be reduced for a specified config. - * By default returns the system setting. + * Returns whether the motion should be reduced for a specified config. By + * default returns the system setting. */ const isReduceMotionOnUI = ReducedMotionManager.uiValue; export function getReduceMotionFromConfig(config?: ReduceMotion) { @@ -120,8 +120,8 @@ export function getReduceMotionFromConfig(config?: ReduceMotion) { } /** - * Returns the value that should be assigned to `animation.reduceMotion` - * for a given config. If the config is not defined, `undefined` is returned. + * Returns the value that should be assigned to `animation.reduceMotion` for a + * given config. If the config is not defined, `undefined` is returned. */ export function getReduceMotionForAnimation(config?: ReduceMotion) { 'worklet'; @@ -504,14 +504,14 @@ function decorateAnimation( type AnimationToDecoration< T extends AnimationObject | StyleLayoutAnimation, - U extends AnimationObject | StyleLayoutAnimation + U extends AnimationObject | StyleLayoutAnimation, > = T extends StyleLayoutAnimation ? Record : U | (() => U) | AnimatableValue; export function defineAnimation< T extends AnimationObject | StyleLayoutAnimation, // type that's supposed to be returned - U extends AnimationObject | StyleLayoutAnimation = T // type that's received + U extends AnimationObject | StyleLayoutAnimation = T, // type that's received >(starting: AnimationToDecoration, factory: () => T): T { 'worklet'; if (IN_STYLE_UPDATER) { @@ -534,7 +534,8 @@ export function defineAnimation< /** * Lets you cancel a running animation paired to a shared value. * - * @param sharedValue - The shared value of a running animation that you want to cancel. + * @param sharedValue - The shared value of a running animation that you want to + * cancel. * @see https://docs.swmansion.com/react-native-reanimated/docs/core/cancelAnimation */ export function cancelAnimation(sharedValue: SharedValue): void { diff --git a/packages/react-native-reanimated/src/commonTypes.ts b/packages/react-native-reanimated/src/commonTypes.ts index 4db6ed3f65b..d8370631baa 100644 --- a/packages/react-native-reanimated/src/commonTypes.ts +++ b/packages/react-native-reanimated/src/commonTypes.ts @@ -14,9 +14,14 @@ export interface StyleProps extends ViewStyle, TextStyle { } /** - * A value that can be used both on the [JavaScript thread](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#javascript-thread) and the [UI thread](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#ui-thread). + * A value that can be used both on the [JavaScript + * thread](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#javascript-thread) + * and the [UI + * thread](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#ui-thread). * - * Shared values are defined using [useSharedValue](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue) hook. You access and modify shared values by their `.value` property. + * Shared values are defined using + * [useSharedValue](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue) + * hook. You access and modify shared values by their `.value` property. */ export interface SharedValue { value: Value; @@ -31,9 +36,10 @@ export interface SharedValue { } /** - * Due to pattern of `MaybeSharedValue` type present in `AnimatedProps` (`AnimatedStyle`), contravariance breaks types - * for animated styles etc. Instead of refactoring the code with small chances of success, - * we just disable contravariance for `SharedValue` in this problematic case. + * Due to pattern of `MaybeSharedValue` type present in `AnimatedProps` + * (`AnimatedStyle`), contravariance breaks types for animated styles etc. + * Instead of refactoring the code with small chances of success, we just + * disable contravariance for `SharedValue` in this problematic case. */ type SharedValueDisableContravariance = Omit< SharedValue, @@ -45,9 +51,10 @@ export interface Mutable extends SharedValue { _animation?: AnimationObject | null; // only in Native /** * `_value` prop should only be accessed by the `valueSetter` implementation - * which may make the decision about updating the mutable value depending - * on the provided new value. All other places should only attempt to modify - * the mutable by assigning to `value` prop directly or by calling the `set` method. + * which may make the decision about updating the mutable value depending on + * the provided new value. All other places should only attempt to modify the + * mutable by assigning to `value` prop directly or by calling the `set` + * method. */ _value: Value; } @@ -65,9 +72,8 @@ export type ShareableRef = { // In case of objects with depth or arrays of objects or arrays of arrays etc. // we add this utility type that makes it a `SharaebleRef` of the outermost type. -export type FlatShareableRef = T extends ShareableRef - ? ShareableRef - : ShareableRef; +export type FlatShareableRef = + T extends ShareableRef ? ShareableRef : ShareableRef; export type MapperRawInputs = unknown[]; @@ -86,7 +92,7 @@ export type MapperRegistry = { export type WorkletStackDetails = [ error: Error, lineOffset: number, - columnOffset: number + columnOffset: number, ]; type WorkletClosure = Record; @@ -114,42 +120,45 @@ interface WorkletBaseRelease extends WorkletBaseCommon { interface WorkletBaseDev extends WorkletBaseCommon { __initData: WorkletInitDataDev; - /** - * `__stackDetails` is removed after parsing. - */ + /** `__stackDetails` is removed after parsing. */ __stackDetails?: WorkletStackDetails; } export type WorkletFunction< Args extends unknown[] = unknown[], - ReturnValue = unknown + ReturnValue = unknown, > = ((...args: Args) => ReturnValue) & (WorkletBaseRelease | WorkletBaseDev); /** - * This function allows you to determine if a given function is a worklet. It only works - * with Reanimated Babel plugin enabled. Unless you are doing something with internals of - * Reanimated you shouldn't need to use this function. + * This function allows you to determine if a given function is a worklet. It + * only works with Reanimated Babel plugin enabled. Unless you are doing + * something with internals of Reanimated you shouldn't need to use this + * function. * * ### Note - * Do not call it before the worklet is declared, as it will always return false then. E.g.: + * + * Do not call it before the worklet is declared, as it will always return false + * then. E.g.: * * ```ts * isWorkletFunction(myWorklet); // Will always return false. * * function myWorklet() { * 'worklet'; - * }; + * } * ``` * * ### Maintainer note - * This function works well on the JS thread performance-wise, since the JIT can inline it. - * However, on other threads it will not get optimized and we will get a function call overhead. - * We want to change it in the future, but it's not feasible at the moment. + * + * This function works well on the JS thread performance-wise, since the JIT can + * inline it. However, on other threads it will not get optimized and we will + * get a function call overhead. We want to change it in the future, but it's + * not feasible at the moment. */ export function isWorkletFunction< Args extends unknown[] = unknown[], ReturnValue = unknown, - BuildType extends WorkletBaseDev | WorkletBaseRelease = WorkletBaseDev + BuildType extends WorkletBaseDev | WorkletBaseRelease = WorkletBaseDev, >(value: unknown): value is WorkletFunction & BuildType { 'worklet'; // Since host objects always return true for `in` operator, we have to use dot notation to check if the property exists. @@ -245,7 +254,9 @@ export type AnimatedSensor = { }; /** - * A function called upon animation completion. If the animation is cancelled, the callback will receive `false` as the argument; otherwise, it will receive `true`. + * A function called upon animation completion. If the animation is cancelled, + * the callback will receive `false` as the argument; otherwise, it will receive + * `true`. */ export type AnimationCallback = ( finished?: boolean, @@ -297,8 +308,10 @@ export type AnimatedKeyboardInfo = { }; /** - * @param x - A number representing X coordinate relative to the parent component. - * @param y - A number representing Y coordinate relative to the parent component. + * @param x - A number representing X coordinate relative to the parent + * component. + * @param y - A number representing Y coordinate relative to the parent + * component. * @param width - A number representing the width of the component. * @param height - A number representing the height of the component. * @param pageX - A number representing X coordinate relative to the screen. @@ -319,7 +332,8 @@ export interface AnimatedKeyboardOptions { } /** - * @param System - If the `Reduce motion` accessibility setting is enabled on the device, disable the animation. Otherwise, enable the animation. + * @param System - If the `Reduce motion` accessibility setting is enabled on + * the device, disable the animation. Otherwise, enable the animation. * @param Always - Disable the animation. * @param Never - Enable the animation. * @see https://docs.swmansion.com/react-native-reanimated/docs/guides/accessibility @@ -348,14 +362,14 @@ type MaybeSharedValueRecursive = Value extends (infer Item)[] | SharedValueDisableContravariance | (MaybeSharedValueRecursive | Item)[] : Value extends object - ? - | SharedValueDisableContravariance - | { - [Key in keyof Value]: - | MaybeSharedValueRecursive - | Value[Key]; - } - : MaybeSharedValue; + ? + | SharedValueDisableContravariance + | { + [Key in keyof Value]: + | MaybeSharedValueRecursive + | Value[Key]; + } + : MaybeSharedValue; type DefaultStyle = ViewStyle & ImageStyle & TextStyle; @@ -369,14 +383,10 @@ export type AnimatedTransform = MaybeSharedValueRecursive< TransformsStyle['transform'] >; -/** - * @deprecated Please use {@link AnimatedStyle} type instead. - */ +/** @deprecated Please use {@link AnimatedStyle} type instead. */ export type AnimateStyle