Port Babel plugin to SWC for Next.js

[nandorojo]

The new version of Next.js uses SWC instead of Babel. This results in way faster bundle and startup times.

The one reason I can't use this is because I need the Reanimated 2 babel plugin. Is there any shot someone would know how to port this to SWC? I have no idea how either babel or SWC work, but I would love to get to take advantage of Next.js 12's innovations...

For context, I just gave a talk about Next.js + React Native: https://twitter.com/FernandoTheRojo/status/1453712622222729217?s=20

Relevant Next.js thread & comment: vercel/next.js#30174 (comment)

Any guidance would be great, thanks!

Update

I opened a new discussion about disabling the Babel plugin altogether for Web: #2620

[wibb36]

Same here. You can always still use Babel (this will disable SWC) with Next 12 while we figure this out.

[nandorojo]

Yeah, this is what I’m doing in the interim. It would be awesome to take advantage of the great new Next.js architecture though.

[wibb36]

Absolutely agree. For kicks, are you facing any other issues using Next.js 12 and Babel?

regarding SWC, I think there should be a reanimated plugin for SWC. I'll keep you updated

[nandorojo]

So far, I think it’s working. Reanimated 2.2.4 I think doesn’t work with Next.js (I get component.previousStyle warnings) but overall I’ve been fine with Next.js 12 and Babel.

Is the SWC + Reanimated plug-in something you would pick up?

[wibb36]

I'm not sure if it's possible for me at the moment because:

1. I don't speak RUST and it seems to be the only way so far to creating a plugin, consequently, recreating the reanimated plugin. There's unresolved parsing issues with JS.
2. I'm not 100% sure if porting reanimated babel plugin to SWC is the only approach.
3. As you already know, an ideal scene would be running animations as natively as possible cross-platform, a departure from that ideal in this case would be running CSS instead of JS on the web therefore, maybe it is worth focusing on making reanimated / maybe MOTI :) running CSS for the web. I'm not sure if you agree with me on this last one??

PS: I think, the good news is that SWC supports all the ecmascript needed in case someone here rewrite the plugin in Rust.

[nandorojo]

I opened a new discussion about disabling the Babel plugin altogether for Web: #2620

[nandorojo]

If someone who is very familiar with Reanimated could give me a sense of how the babel plugin works, I can try to relay this to the Next.js team to see if they can port it.

[axeldelafosse]

Looking for a Rustacean to work on this: https://twitter.com/axeldelafosse/status/1493992830175481859

[piaskowyk]

Interesting thread! If someone wants to port reanimated plugin to SWC I can help with pleasure. For web is required just a part of the reanimated plugin.

[piaskowyk]

The plugin is needed for the web just to generate closure.
const inputs = Object.values(updater._closure ?? {}); -
https://github.com/software-mansion/react-native-reanimated/blob/main/src/reanimated2/hook/useAnimatedStyle.ts#L412
_closure - https://github.com/software-mansion/react-native-reanimated/blob/main/plugin.js#L462-L463

But you can simplify it and insert to _closure just SharedValues used by updater function passed as an argument to useAnimatedStyle (useAnimatedStyle(updater)). It should be enough.

[nandorojo]

But you can simplify it and insert to _closure just SharedValues used by updater function passed as an argument to useAnimatedStyle (useAnimatedStyle(updater)). It should be enough.

I assume we would want non-shared values as well, right? To make sure it’s reactive.

[piaskowyk]

You are right. The _closure is added as a dependency, but if you want you can specific dependency array as the second argument for useAnimatedStyle. In other words, If your plugin won't prepare the whole _closure it will work but you'll specify the dependency array manually.

[nandorojo]

@piaskowyk do you know of anyone who might be able to help make the rust plug-in? I think there are enough people who would be willing to sponsor if so!

happy to jump on a quick call to discuss that if that's easier

[axeldelafosse]

Yeah let's chat together (Krzysztof, Fernando and I) to discuss the next steps. I'll send you an email

[jesse-savary]

Would be great to see this; wondering how well it would pair with https://github.com/callstack/repack/ for Android/iOS

[bran-dy-b]

Was there any conclusion here with respect to whether or not this is going to happen? I saw this but there doesn't seem to be any activity around it #3341

Would be great to be able to use SWC and drop babel, but I don't have the expertise to contribute here 😞

[axeldelafosse]

Hey Brandon! We sponsored this open-source work and Jakub from Software Mansion released it here: https://github.com/j-piasecki/swc-plugin-react-native-reanimated. You can refer to the Showtime Next.js app for usage: https://github.com/showtime-xyz/showtime-frontend/blob/staging/apps/next/next.config.js#L92