Remove react-native-reanimated.d.ts #4519

tjzel · 2023-06-01T12:38:22Z

Motivation

Since React Native Reanimated started as a pure JavaScript library at some point it was decided to migrate to TypeScript. Code base was complex enough for this task to be difficult and automatically generated type definitions weren't coherent with the API. Therefore a manually written file was required to provide better types for people that use TypeScript. However this created problems on its own as not all of the changes were put into the d.ts file and differences between inferred type and manual type could be very significant. After time we circled back to complete the TypeScript migration and remove this intermediate d.ts file.

Summary

The goal of this PR is to remove react-native-reanimated.d.ts file that had all of our manually written type definitions in favor of automatically generated files stemming from source files. Since this was still a strenuous task we've decided not to fix all the internal types just yet and preserve only the necessary manually written types from the d.ts file. There's quite a lot of type casting due to that but this is planned to be corrected in the future as well.

Fixes: #4616, #4556

Test plan

I've added the following script to our package.json: yarn type:check-api. It compiles source code of our examples with the use of autogenerated type definitions. It was my main tool of performing this migration an was extremely handy.

All of our static check were useful as well - of course linting and type checking the source code.

Since our Examples don't cover all of the cases of our API usage (although I believe they cover a significant part of it) and we've kept as little of the d.ts file as possible it's to be expected for type errors to be reported in the future - but I think it's the better way to do it than to attempt to generate more API use cases by us.

## Summary The `FrameInfo` interface was not being exported out of the package, although it's present in the old `.d.ts` file, this PR adds the missing export.

## Description This PR is part of an ongoing effort to get rid of the `.d.ts` file and use type definitions generated based on the source code. ## Changes - Changed `measure` to be a generic function - Changed `scrollTo` to be a generic function ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Added TS types tests - [ ] Added unit / integration tests - [ ] Updated documentation - [ ] Ensured that CI passes --------- Co-authored-by: Tomasz Żelawski <tomasz.zelawski@swmansion.com> Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>

## Description This PR is part of an ongoing effort to get rid of `.d.ts` file and use type definitions generated based on the source files. ## Changes - Update exported FlatList type to be generic - Export type and the component under the same name ## Checklist - [ ] Included code example that can be used to test this change - [ ] Updated TS types - [ ] Added TS types tests - [ ] Added unit / integration tests - [ ] Updated documentation - [ ] Ensured that CI passes --------- Co-authored-by: Tomasz Żelawski <40713406+tjzel@users.noreply.github.com>

## Description This PR is a part of the ongoing effort to get rid of Reanimated's `.d.ts` file and switch to types generated based on the source code. ## Changes - Updated types of `useAnimatedGestureHandler` types to be compatible with the ones present in the `.d.ts` ## Checklist - [ ] Updated TS types - [ ] Included code example that can be used to test this change - [ ] Added TS types tests - [ ] Added unit / integration tests - [ ] Updated documentation - [ ] Ensured that CI passes

## Description This PR is part of an ongoing effort to get rid of the `.d.ts` file and switch to types generated based on the source code. ## Changes - Updated `AnimatedStyle` to allow primitives for certain props - Updated `useAnimatedStyle` to not accept functions returning arrays ## Checklist - [ ] Included code example that can be used to test this change - [ ] Updated TS types - [ ] Added TS types tests - [ ] Added unit / integration tests - [ ] Updated documentation - [ ] Ensured that CI passes

## Summary This PR is part of an ongoing effort to get rid of `.d.ts` file and use type definitions generated based on the source files. In this case, I've changed `AnimatedSensor` to be generic and provide different sensors depending on what it's parametrized with. This way it's easy to overload `useAnimatedSensor` and setup the correct typings depending on what sensor is being created. --------- Co-authored-by: Tomasz Żelawski <tomasz.zelawski@swmansion.com>

## Summary This PR is part of an ongoing effort to get rid of `.d.ts` file and use type definitions generated based on the source files. The focus of this PR is on the code responsible for building layout animations. Instead of hard-coded return types in builders, it uses the implicit `this` argument to infer the type that should be returned.

## Summary This PR is part of an ongoing effort to get rid of `.d.ts` file and use type definitions generated based on the source files. The main focus of this PR is to make `withDelay` and `withRepeat` generic functions so that they can accept any animation as an argument instead of only their own type. ## Test plan

src/createAnimatedComponent.tsx

piaskowyk

2.

app/src/examples/OldMeasureExample.tsx

src/createAnimatedComponent.tsx

src/reanimated2/NativeMethods.ts

src/reanimated2/layoutReanimation/defaultAnimations/Flip.ts

src/reanimated2/js-reanimated/index.ts

src/reanimated2/index.ts

src/reanimated2/hook/useAnimatedSensor.ts

tjzel · 2023-06-29T08:05:22Z

@piaskowyk

2.

Error comes from TypeScript inferring an array a bit higher in the code as an array of never. This fixes it:

-  const output = [];
+  const output: JSX.Element[] = [];

Error is caused, from what I understand, imageRef being a inferred as a react-native component instead of being reanimated animated Image counterpart component. (tl;dr - improperly typed example).

I think it's better to fix these changes in separate PR, not to bloat this one more.

## Summary `const IS_WEB = isWeb();` was accidentaly moved inside the `'worklet'` function in this [PR](#4519) on `decay.ts` This PR moves it outside the `'worket'` function. Fixes: #4656 Co-authored-by: Efstathios Ntonas <stathis@hikiapp.com>

## Motivation Since React Native Reanimated started as a pure JavaScript library at some point it was decided to migrate to TypeScript. Code base was complex enough for this task to be difficult and automatically generated type definitions weren't coherent with the API. Therefore a manually written file was required to provide better types for people that use TypeScript. However this created problems on its own as not all of the changes were put into the `d.ts` file and differences between inferred type and manual type could be very significant. After time we circled back to complete the TypeScript migration and remove this intermediate `d.ts` file. ## Summary The goal of this PR is to remove `react-native-reanimated.d.ts` file that had all of our manually written type definitions in favor of automatically generated files stemming from source files. Since this was still a strenuous task we've decided not to fix all the internal types just yet and preserve only the necessary manually written types from the `d.ts` file. There's quite a lot of type casting due to that but this is planned to be corrected in the future as well. Fixes: #4616, #4556 ## Test plan I've added the following script to our `package.json`: `yarn type:check-api`. It compiles source code of our examples with the use of autogenerated type definitions. It was my main tool of performing this migration an was extremely handy. All of our static check were useful as well - of course linting and type checking the source code. Since our Examples don't cover all of the cases of our API usage (although I believe they cover a significant part of it) and we've kept as little of the `d.ts` file as possible it's to be expected for type errors to be reported in the future - but I think it's the better way to do it than to attempt to generate more API use cases by us. --------- Co-authored-by: Krzysztof Piaskowy <krzysztof.piaskowy@swmansion.com> Co-authored-by: Karol Wąsowski <karol.wasowski@swmansion.com> Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com> Co-authored-by: Jakub Piasecki <jakub.piasecki@swmansion.com> Co-authored-by: Jakub Piasecki <jakubpiasecki67@gmail.com>

## Summary `const IS_WEB = isWeb();` was accidentaly moved inside the `'worklet'` function in this [PR](#4519) on `decay.ts` This PR moves it outside the `'worket'` function. Fixes: #4656 Co-authored-by: Efstathios Ntonas <stathis@hikiapp.com>

## Summary Added as discussed in #4519. All changes in file except for `.eslint.rc` were made automatically by `eslint --fix` and `yarn format`.

## Summary During removal of `react-native-reanimated.d.ts` in #4519 I didn't consider that some types were exported only in the aforementioned file, e.g. `WithSpringConfig`. Therefore when we released `3.4.0` those types disappear from public API. This PR restores lacking types from `.d.ts` - but only the relevant ones, without Reanimated1 API. ## Types restored ### namespace Animated - Extrapolate - DerivedValue - Adaptable - TransformStyleTypes - AdaptTransforms - AnimatedTransform - AnimateStyle - StylesOrDefault - AnimateProps - EasingFunction - addWhitelistedNativeProps - addWhitelistedUIProps - AnimatedScrollViewProps - FlatListPropsWithLayout ### react-native-reanimated - Adaptable - AdaptTransforms - AnimatedTransform - TransformStyleTypes - AnimateStyle - StylesOrDefault - AnimatedScrollViewProps - FlatListPropsWithLayout - \-\-\- - EasingFunction - EasingFunctionFactory - \-\-\- - WithDecayConfig - \-\-\- - WithSpringConfig - \-\-\- - WithTimingConfig - \-\-\- - FlatListPropsWithLayout - \-\-\- - AnimatedScrollViewProps - \-\-\- - AnimatedStyleProp - \-\-\- - InterpolateRGB - InterpolateHSV - \-\-\- - KeyframeProps ___ Requires #4855 ## Test plan CI + 🚀

piaskowyk and others added 30 commits September 23, 2022 07:54

Cherry-pick changes by piaskowyk

cd93174

Removed .d.ts file

86ef08b

Fixed Animated component types

40d3bbb

Fixed invalid JSX component errors

ad9727b

Fixed optional deps in hooks

3ee09a1

Updated some tests

648e4c5

Separate Write Types on Properties

01e29e8

Bump TypeScript in FabricExample

3e276a9

Export SharedValue type from Animated

a453c77

Merge branch 'main' into @kwasow/bobFix

6bced7f

Use correct Keyframe type for layout animation props

7664e97

Move ts tests to the root directory

697420d

Remove include from tsconfig

fc2adcf

Merge branch 'main' into @kwasow/bobFix

63566e5

merge main w/ squash

cd4e651

Merge branch 'main' into @kwasow/bobFix

f1dfdc8

Merge branch 'main' into @kwasow/bobFix

e56dc65

fix rules for typetests

96e0ae2

Merge branch 'main' into @kwasow/bobFix

0640bf5

Merge branch 'main' into @kwasow/bobFix

65b5a32

no regressions

e981e21

components

37cbde0

tjzel added 2 commits June 22, 2023 14:57

remove unnecessary comments for runOnJS

99475a5

correct _scheduleOnJS type & merge main

3298e51

jobpaardekooper mentioned this pull request Jun 25, 2023

Typing seems incorrect for useAnimatedRef + FlatList + scrollToIndex #4616

Closed

correct exported type of FlatList

96f07cc

Latropos approved these changes Jun 27, 2023

View reviewed changes

src/createAnimatedComponent.tsx Outdated Show resolved Hide resolved

piaskowyk reviewed Jun 27, 2023

View reviewed changes

tjzel added 5 commits June 29, 2023 13:52

amend import type

bc1ba67

Merge branch 'main' into @tjzel/types/remove-dts

ed80afb

fix error in _scheduneOnJS

4445c43

export types

261a95d

correct typings for _scheduleOnJS

bc846fc

tjzel added this pull request to the merge queue Jun 29, 2023

Merged via the queue into main with commit 1c255d1 Jun 29, 2023
8 checks passed

tjzel deleted the @tjzel/types/remove-dts branch June 29, 2023 13:38

This was referenced Jun 30, 2023

Fix bob types #3605

Closed

Add eslint rule to prefer import type syntax #4655

Merged

tomekzaw mentioned this pull request Jul 2, 2023

[3.4.0 nightly] isWeb is not a function on decay.ts #4656

Closed

efstathiosntonas mentioned this pull request Jul 2, 2023

Fix isWeb is not a function #4661

Merged

github-merge-queue bot pushed a commit that referenced this pull request Jul 5, 2023

Add eslint rule to prefer import type syntax (#4655)

ce3a282

## Summary Added as discussed in #4519. All changes in file except for `.eslint.rc` were made automatically by `eslint --fix` and `yarn format`.

Latropos pushed a commit that referenced this pull request Jul 13, 2023

Add eslint rule to prefer import type syntax (#4655)

a5e1194

## Summary Added as discussed in #4519. All changes in file except for `.eslint.rc` were made automatically by `eslint --fix` and `yarn format`.

tjzel mentioned this pull request Jul 13, 2023

Animated.ScrollView Incorrect props #4728

Closed

This was referenced Jul 26, 2023

Fix worklet types [1/?] + correct types in useAnimatedGestureHandler #4823

Closed

Restore missing API #4847

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove react-native-reanimated.d.ts #4519

Remove react-native-reanimated.d.ts #4519

tjzel commented Jun 1, 2023 •

edited

piaskowyk left a comment

tjzel commented Jun 29, 2023 •

edited

Remove react-native-reanimated.d.ts #4519

Remove react-native-reanimated.d.ts #4519

Conversation

tjzel commented Jun 1, 2023 • edited

Motivation

Summary

Test plan

piaskowyk left a comment

Choose a reason for hiding this comment

tjzel commented Jun 29, 2023 • edited

tjzel commented Jun 1, 2023 •

edited

tjzel commented Jun 29, 2023 •

edited