4 ms·

As a react native dev I’d love to hear some of the implementation details! First, is this a whole new router? Is it based on expo-router, or is it sitting on

As a react native dev I’d love to hear some of the implementation details! First, is this a whole new router? Is it based on expo-router, or is it sitting on top of react-navigation? Maybe all new with react-native-screens as a foundation? As far as Vite goes, I assume this is only on the web? Metro is still be used on the native side? If true any reason why you’re not using metro on the web as well (I’m kinda partial to having all platforms as similar as possible, tooling wise)? I suppose I should also ask how expo fits into this all…meta framework on top of expo or something “all new” on stock react native?

nwienert 2y ago
It started as a fork of expo router to test if we could get it to work on Vite. Over time we did diverge a few things and added other features. It’s actually fully Vite on native. We wrote an entire custom bundling step and hot reloading. This was no small feat, quite hard. That was the motivation though - simple tooling and the same bundler for everything. Expo is great for Expo Go and EAS. It’s a good complement!
- gorbypark 2y ago
  From my limited understanding of Vite, it serves es modules directly on the fly during dev but uses Rollup to bundle in production. Did you swap out Rollup for Metro in production, or have you somehow ported all that byte code generation stuff to Rollup as well? Pretty wild either way!
  - nwienert 2y ago
    We use Rollup to build for native, SWC so we can compile class away (RN doesn't support classes, shockingly). Then we actually build out our own custom bundle using the Rollup output because we need to hot reload it, so we built our own little hot reload pipeline on top of Vite. It's not too complex actually - websocket, listen to vite, transpile it to CJS/ES5, analyze and re-write imports to match bundle, and then send it over. But yea, it was a lot of work. Going to have to make some content around this as I assume a lot of people thing it's just Vite on top of Metro.

nwienert 2y ago

It started as a fork of expo router to test if we could get it to work on Vite. Over time we did diverge a few things and added other features. It’s actually fully Vite on native. We wrote an entire custom bundling step and hot reloading. This was no small feat, quite hard. That was the motivation though - simple tooling and the same bundler for everything. Expo is great for Expo Go and EAS. It’s a good complement!

gorbypark 2y ago
From my limited understanding of Vite, it serves es modules directly on the fly during dev but uses Rollup to bundle in production. Did you swap out Rollup for Metro in production, or have you somehow ported all that byte code generation stuff to Rollup as well? Pretty wild either way!
- nwienert 2y ago
  We use Rollup to build for native, SWC so we can compile class away (RN doesn't support classes, shockingly). Then we actually build out our own custom bundle using the Rollup output because we need to hot reload it, so we built our own little hot reload pipeline on top of Vite. It's not too complex actually - websocket, listen to vite, transpile it to CJS/ES5, analyze and re-write imports to match bundle, and then send it over. But yea, it was a lot of work. Going to have to make some content around this as I assume a lot of people thing it's just Vite on top of Metro.