Skip to content

feat(Worklets): use .native.ts suffix for native-only files and .ts for web-only files#8371

Merged
tjzel merged 43 commits intomainfrom
@tjzel/worklets/use-native-suffix
Oct 28, 2025
Merged

feat(Worklets): use .native.ts suffix for native-only files and .ts for web-only files#8371
tjzel merged 43 commits intomainfrom
@tjzel/worklets/use-native-suffix

Conversation

@tjzel
Copy link
Collaborator

@tjzel tjzel commented Oct 10, 2025

Summary

A better approach than

To reduce the impact React Native Worklets have in web environments and simplify ifs for given platforms, I moved all native-only code to .native files and kept web-specific implementations in .ts files. This is due to fact that React Native always pulls .native files first but some web environments don't prefer .web files.

TODO: Measure bundle size impact.

Test plan

  • Fabric example
  • Unit tests
  • Runtime tests
  • CI

@tjzel tjzel mentioned this pull request Oct 22, 2025
github-merge-queue bot pushed a commit that referenced this pull request Oct 23, 2025
Required for 
- #8371

## Summary

This PR is an ongoing effort to reduce the impact of Reanimated and
Worklets in web bundles and to simplify the logic of platform-dependent
code.

The ideal solution is to have native-only files with a `.native.ts`
extension and web only files with just `.ts` extension alongside them.
However, currently we also have `.web.ts` files, which can be
problematic in some environments. We want to transition to `.native.ts`
files gradually.

This PR does a few things:

- It edits TSConfigs alongside the repository. By default we specify
that accepted extensions are `.native.ts`, `.ios.ts`, `.android.ts`,
`.ts` (obviously also `.tsx` etc.). This means that when in IDE we click
`go to source` we'll go to a `.native` file which is the most common use
case for us. Also types for type-checking will be pulled like this.

- We add additional TSConfigs for web types. These extensions ignore
`.native` .etc. extensions and accept `.web` extensions. You can switch
to those TSConfigs for web type-checking in your IDE.

- Adding type checking scripts and CI checks for web types.

- Fixing (or ignoring) all current problems with web types - i.e.
mismatching web and native types in Reanimated.

- Amending eslint configs to properly work in this setup.

## Test plan

CI
@tjzel tjzel changed the base branch from main to @tjzel/worklets/jest-mocks October 27, 2025 15:06
@tjzel tjzel requested a review from MatiPl01 October 27, 2025 15:22
@tjzel tjzel marked this pull request as ready for review October 27, 2025 15:29
Copy link
Member

@MatiPl01 MatiPl01 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Left just a few nits.

github-merge-queue bot pushed a commit that referenced this pull request Oct 28, 2025
## Summary

Unfortunately a typical Jest setup in React Native pulls code from
`.native` files which don't make sense to be tested and implemented for
Jest environment. For this case we implement a full mock of Worklets to
use in testing.

Extracted from:
- #8371

In another PR all uses of `IS_JEST` will be removed from Worklets. 

## Test plan

Run Jest tests in Worklets and Reanimated.
Base automatically changed from @tjzel/worklets/jest-mocks to main October 28, 2025 09:18
@tjzel tjzel added this pull request to the merge queue Oct 28, 2025
Merged via the queue into main with commit 42cd154 Oct 28, 2025
12 checks passed
@tjzel tjzel deleted the @tjzel/worklets/use-native-suffix branch October 28, 2025 14:38
github-merge-queue bot pushed a commit that referenced this pull request Oct 29, 2025
## Summary

Fixing minor issues after merging
- #8371 

## Test plan

Run example app with & without Bundle Mode
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants