Rustifying Vite: Designing a Hybrid Toolchain for the Real World

We're going to talk about how to write JavaScript and how to use TypeScript. We're going to talk about how to use TypeScript to improve the web. So let's get started. So what's your favorite framework? What's your favorite? Tell me in three, two, one. Scalabr. Yes, one of these, possibly. Yeah? Something not on the list, which we can talk later. It's fine.

But the thing is, what are they all in common? Well, they're all built with a certain technology, right? Vite, the one and only. You might know Vite by this logo, right? And Vite has changed a bit. Who here is not using Vite? Nobody. One, two, three. I don't believe you. No, no, no, no way. No way. But that's OK.

So yeah, in the past, Vite actually had a couple tools under the hood that were used to bundle your code, to pre-build it, to make the dev server happening. So we had ESBuild for pre-bundling, for transformation, for minification, rollup, right? Some might still know that. Bundling, right? The plugin system, all your favorite frameworks plug-in are rollup plugins to some degree as well. And also very limited chunk control. And then for the React folks here, there was also SWC that you could use, like as an alternative for transforms, for React fast refresh, et cetera. But the problem is, well, these are three tools together in one bigger build tool. This already sounds like pain, right? So at some point, we thought, why not unifying this whole layer, the underlying bundler layer? And that meant the following. We take this, we take it all away, switch the logo, because that happened in Vita 8 eventually, and then there is rolldown. One bundler through them all. So you're like, why is there another bundler? Why can't we use one of these that exists already? Or like TurboPack, what Tobias talked about earlier, or Webpack, et cetera. Well, it's complicated, right? First of all, multiple bundlers under the hood, of course, complexity.

One bundler through them all. So you're like, why is there another bundler? Why can't we use one of these that exists already? Or like TurboPack, what Tobias talked about earlier, or Webpack, et cetera. Well, it's complicated, right? First of all, multiple bundlers under the hood, of course, complexity. It's a big problem for the Vite maintainers, the contributors, but also the developers, because it introduces inconsistencies between development and between production, which sucks. Then there's also limitations. Some bundlers say, oh, we don't know how to implement A, B, C. So neither rollup nor ASBuilt wanted to introduce certain features, because they said, hey, that's out of scope. And that's fine, but these are features, Vite and maybe all you need. And then of course, time. We also know back in the days, the Webpack times would take a long time. Now builds are faster, but they could be even faster now. So of course what we do, we rerun everything in Rust. We are 10x developers. Let's go. Jokes aside, time to meet rolldown.

And yes, that just rolled down on purpose. So rolldown itself is more than just like, hey, let's take rollup and port it to Rust, because it's not that easy. Instead, we decided to combine the best parts that we have of prior art. So rollup's API, all the plug-ins are still compatible, right, very important. You don't really have to migrate things away and over. That would be like a huge churn for everybody. Speed and also behavior for me is built, right? Things like inject, define, et cetera. And also we inspired, we got inspired by Webpack to have some more advanced chunking. So you can make sure your JavaScript applications are as performant as possible. You can split them up in files as needed.

And there's also more, of course, more features, like module types, lazy barrel optimization, built-in HMR, input map generation, et cetera, et cetera, et cetera. There's a lot. And also, of course, there's built-in minifier and transformers. You can have syntax lowering, or your TypeScript is being transferred over to JavaScript, and your code is minified, so you have a very performant bundle in the end. So that's what rolldown can do.

But also, yeah, it feels a bit strange, right? Wake up, there's another Rust rewrite. Well, it's not banned, at least. So what we can do here and why we did it in the end is we want to make sure that the Rust-based bundle also works well with the JavaScript ecosystem. How we did this is we added a few more leverages for plugin authors, right? And one of the things is hook filters for plugins. So plugins work as they are, but then you have to call the JavaScript plugin for each file for each check, and that's a bit meh, right? So instead, we said, look, let's say we have this very simple rolldown or rollup plugin. They're incompatible, right? They're compatible, so let's create a new framework called Swangular. And we just say, OK, transform something. If the ID doesn't end with Swangular, then return and otherwise do some actual transformation. Yeah, Swangular is a great name, I know. But the problem is this transform function is called for every single file, and that's a lot of files, I'll tell you, in your Node modules. So instead, what we do is, well, we take this, but we extract it into a filter function to say, OK, just run this if ID includes Swangular. And now this can also be parsed by Rust, so Rust doesn't have to call it all the time and say, OK, only for these conditions, and we're good. And that's the magic behind it. So lower overheads, and it works in rolldown.vite and even in rollup. Yeah, it's important everywhere, right? And if it's not there, it's fine. It will just be ignored. Also, Vite's got, well, Rustified, of course, so native Rust plug-ins are covered. Things like module resolution, yeah, finding all of these aliases, et cetera, et cetera. TypeScript JSX transform, just mentioned it before. Define replacements, right, like nodes n, for example. Import metaglob if you need a certain expression there for it, also dynamic input variables, so things like import pages and then the name, dot JS, or with the template syntax here. And that's not the end, of course. We did it with the bundler. We have the underlying, well, minifier, transformer, or XE, et cetera. And based on that, we have a lintern and a formatter. All of that together, you can actually use in a toolchain called V+. But that's time for another talk. And that's what all about it.