fix(worklets): compile JSX in generated worklet files

[hannojg]

Summary

This fixes and enables JSX usage in worklets:

• [worklets/bundle mode] worklets code is processed _twice_ by babel #9214

Background:

Imagine you have

// MyComp.tsx
return <ImportedComponent />

then metro transforms our app code. In dev, React Native’s Babel preset includes JSX dev handling, which annotates JSX with debug metadata:

// MyComp.tsx - transformed
return <ImportedComponent __self={this} />;

Now, the worklets plugin captures this and writes it into the generated worklet file.
As we created a new file, Metro later processes that generated .worklets/<hash>.js file too.

Here, Babel’s JSX dev transform sees JSX that already has __self and throws while trying to apply dev JSX handling again with the error described in #9214!

What I changed:

I basically configured the worklets babel plugin that writes the .worklets/.jsfiles to use@babel/preset-react`.

This way:

<ImportedComponent __self={this} />

would become:

import { jsx as _jsx } from 'react/jsx-runtime';

return _jsx(ImportedComponent, { __self: this });

now, when metro processes the file, it would not try to transform the JSX and insert __self, as its already transformed.

I am not sure if this is an actual fix or rather a workaround.

Test plan

Added a test file!