Pass down generator boolean in babel plugin #5565
Conversation
|
As far as I tested, this PR is enough to have full generator support with worklets which I'm quite excited about. |
|
if you give me some pointer on how to do it, I'd be happy to. |
|
You can just paste some input source code that doesn't work without this change and we'll take care of it! Also, here is a sample unit test. You can run it with edit: oh, I missed the example from the issue description, sorry about that. Let me know if you wish to add this unit test, if not we can do that for you 😄 |
|
@tomekzaw I added a little test |
|
Everything looks good, I just added one more test 😺 |
|
I'm really excited for this – @wcandillon and I were exploring using generators as a more fluent way to compose functions that need to call out to a runtime, and realized that it was especially well suited to animation code! 🥳 |
## Summary Inspired by #5565. Currently we don't respect if the workletized function is an async one. This PR fixes this. Keep in mind that even with these change **async worklets will not work properly on the UI thread**. This is because Hermes doesn't support them out of the box and they need to be transformed into generators first (you can see that in the snapshots). Properly transforming them so they are valid on UI thread should be considered a future, very low priority task, since it wasn't requested yet by our users. ## Test plan Relevant tests were added to `plugin.test.ts`. <details> <summary> To see the difference between JS and UI behavior </summary> ```tsx import { StyleSheet, View, Button } from 'react-native'; import React from 'react'; import { runOnUI } from 'react-native-reanimated'; export default function EmptyExample() { async function asyncWorklet() { 'worklet'; await Promise.resolve(); console.log('Hello world!'); } const runAsyncWorklet = runOnUI(asyncWorklet); return ( <View style={styles.container}> <Button title="Run async worklet on UI" onPress={runAsyncWorklet} /> <Button title="Run async worklet on JS" onPress={asyncWorklet} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, }); ``` </details>
fixes #5564