Vite compatibility?

[redbar0n]

1. Is Tamagui compatible with Vite? As you know, Vite enables unbundled development (much faster than Webpack) and uses esbuild to transpile types (20-30x faster than tsc), and uses Rollup for production builds.

I’d like to use Tamagui with vite-plugin-ssr instead of NextJS (which is tied to Webpack…).

I see that you use Webpack and Babel currently.

2. Also, how do you bundle Tamagui for native? I’ve looked at the docs, but it doesn’t say anything about Expo / Metro procedure or compatibility.

[redbar0n]

Seems like Vite supports Babel:

vitejs/vite#1742

Through babel-plugin-macros.

[natew]

The babel plugin doesn't do fancy CSS extraction. But tamagui is nicely sorted into packages, so actually the webpack loader mostly shares code nicely with babel plugin for example. It should be well set up to try and adapt to Vite if they do have a plugin system for extracting CSS.

[redbar0n]

Seems like Vite already extracts CSS without a plugin:

Vite automatically extracts the CSS used by modules in an async chunk and generates a separate file for it.
https://vitejs.dev/guide/features.html#css-code-splitting

With respect to SSR, maybe this can help:
vitejs/vite#1883

Vite.js & Rollup plugin for generating critical (above-the-fold) CSS:
https://github.com/nystudio107/rollup-plugin-critical

What do you think?

[natew]

If someone starts PR happy to help, probably wont prioritize for a while.

[jsfroth]

@redbar0n Are you working on it or planning to do? If not I'm consindering trying to implement it. But it might take a while until I find the time to do it.

[redbar0n]

@jsfroth no, I don’t have the capacity at the moment. It’d be awesome if you would start a branch and invite people to join in the work on it.

[redbar0n]

FWIW, I’m also keeping an eye on Bun as an alternative to Vite:

https://betterprogramming.pub/is-bun-the-next-big-thing-after-webpack-d683441f77b9

There’s quite a bit of development in the field these days. NextJS (Vercel) having hired the Webpack maintainer, presumably to improve performance, as well.

[natew]

I got basic support with Vite, but without static extraction:

See this config for reference: https://github.com/tamagui/tamagui/blob/master/packages/sandbox/vite.config.ts

Closing this, I'll get to the extraction plugin sometime soon.