Vite+, Void, Vite 8 Release and more - Our March Highlights

March was a very exciting month for us and hopefully for you too Especially during our release week there were tons of new things and beyond that we also never stopped shipping As every month this video shows some of the highlights and if you want to know more then make sure to read the whole recap as a blog post the link is down below as usual Also dont forget to join our newsletter so you get all the latest news straight in your inbox and never miss out But now lets have a look Void At the very end of our March launch week Avenue himself announced one more thing during his talk at Vue.js Amsterdam and that was Void a deployment platform for Vite applications to deploy them at warp speed The benefit here is that it also comes with an SDK so you can tightly integrate your application and that makes the DX just a dream No more worries about provisioning infrastructure and getting an all included package including databases KV storage object storage and so on so on Theres just one command to deploy it at all Void Deploy and the whole thing is AI native coming with skills MCP and prompts for coding agents so they do work and you dont have to Void will also be framework agnostic so no matter which frontend framework or meta framework you use you can deploy it to Void as long as Vite is the base of it If you havent done already go to void.cloud and sign up for the early access so you are on the list when we send out the first batches Vite Plus Another big announcement during our March launch week was the release of Vite Plus as MIT and open source and you probably have heard about it already Otherwise the announcement video is also linked below so you can take a look Most importantly its there to simplify and unify your frontend toolchain to bring you the best tools that are there and they work seamlessly together and also manage your Nodejs version and package manager It doesnt stop at the initial launch though We continuously ship multiple versions to add new features and bug fixes And one of them is related to the vp create command After choosing what kind of application you want to create we can choose the name and the package manager And before the package manager was limited to pnpm yarn and npm and one of the most requested features was using bun And the latest Vite Plus version now ships with bun as package manager supported The best part is that Vite Plus has translation layers for flags so no matter if you have used yarns --immutable or pnpms --frozen-lockfile you can use all of these and Vite Plus under the hood will translate them depending on the package manager you use Vite After multiple betas a temporary package and testing through the community plus a green ecosystem CI Vite 8 has been eventually announced and released in the middle of March And more amazing that it got more than 27 million downloads in the first seven days which is big for such a major version Especially that from an architectural point of view Vite 8 has the biggest changes since Vite 2 because now its based on Rolldown officially It has a Rust core and a Rust bundler But besides the Vite 8 announcement theres also something that got released with it which is the new version 6 major of the Vite React plugin Previous versions of the React plugin had actually Babel included by default Here we see that version 5 is installed and if you have a look at our dependencies we see that Babel core is Now if we upgrade on version 6 though and quickly reinstall our and do the same we will see well there is no Babel anymore Thats because the transforms Babel did before can now be taken over by OXC But if you might wonder now wait what is with the React compiler Because that one uses Babel under the hood No worries theres a solution for that and its pretty easy If you have a look at our Vite config things look simple and fine If we now want to add the we can add a compiler preset from our plugin and then we also need to install a Babel plugin This Babel plugin you can get from @rolldown/plugin-babel And then in here as the preset you can just add the React compiler preset And from here on the compiler will work as before Also if you scaffold a new application with Vite and choose the React compiler thats actually the default Upgrading from version 5 to version 6 of the React plugin is also straightforward because its basically what weve seen just here all documented nicely in the changelog Vitest Another amazing release in March was Vitest 4.1 The minor version of course does not come with breaking changes but with a lot of features And one feature that will probably also help your test suite out there is test tags To get started I created a few example tests We have a before all option that connects to the database We have some unit tests We have something that actually needs the database in theory and a stress test that takes longer If you would only want to run the utils test or the stress test here this before all would still be connected which is not ideal So what we could do is we could use test tags To set test tags up the easiest is to go to Vitest and in the test object here you can add tags Thats just an array and tags have a name and then it can also have a description At least write them better than I do And we can also pass in some options Like we can set the timeout for all integration tests to 100000 So this way we can easily pass options to different types of tests that we want to use We also have to apply these test First we maybe want to have another one and say name a unit And now to apply them what we want to do is here between the name of either the test itself or the describe block we can add a test tag by saying tags unit So same here we can add a object and here we can say tags integration And we can also use multiple if we want to So that can be quite helpful if you want to label for example some slow tests some flaky tests et cetera et cetera Of course we can also run them in a way So we only run tests with certain To do so lets run pnpm vitest dash dash tags filter unit And this will just run the tests that have the unit tag which is this one And we have this before all and this is running all the time But ideally we only want to run that when the integration tests are actually necessary So we connect to our database to test that properly And we can actually do so We just need to have the test runner also imported by vitest and then we can call the matches tag and all we have to put in we have to say okay we have the same array and here we can save integration tests So lets put them in here And if we say if this is the case then run that Otherwise skip ahead And if we now run the unit tests then we will see these are now way quicker because the before all block here is fully skipped Now there are also way more things you can do with test tags For example define them through JS docs have other ways to filter them use them with the programmatic API and so on and so on Please give them a try and let us know what you think about them Rolldown With the Vite 8 release Rolldown became the default for all Vite applications which means that build times are shrinking down to a minimum And new versions of Rolldown which is in our seat right now are coming out weekly bringing performance improvements bug fixes and new features on the road to 1.0 No breaking changes though as promised One feature that didnt make it into core yet or it was there but was removed eventually is CSS support Right now Vite and its CSS plugin are taking care of bundling your CSS But the Rolldown team is always curious regarding your needs so make sure to leave a comment But what if you have to bundle a library lets say your design system or your component library Well then you can use TSdown which is an elegant library on top of Rolldown and also lives in the Rolldown org In the recent weeks TSdown added experimental CSS support and moved that to an extra package called TSdown CSS So make sure to pin that when you install it because semver doesnt apply there One new feature is the support of CSS modules besides preprocessors code splitting etc So now your code using CSS modules can also be handled properly That means even if you need CSS no matter for your application or a library you always have the choice of going the Vite route or the TSdown route while there is no CSS support in the core of Rolldown yet But were working on it Oxlint Oxlints JavaScript plugin support reached alpha And what it means is around 80% of the ESLint users can just migrate over and their rules work as before Thats because Oxlint is compatible with the ESLint plugin API and actually runs them even faster You can take your rules no matter if its your custom rules or some packages and run them through the JS plugins in Oxlint If you have a very classic apptsx component using use state from React but people proficient in React already see that set count here is triggering and infinite rendering loop The problem is that if we just run pnpm lint in this case nothing is caught One thing we can do is just adding the native React plugin here and hope that this might work but it doesnt This is because the rule itself called set state in render only works for the React compiler and the React compiler rules well they cant be easily ported for Rust Luckily we can use the JavaScript plugin of that We have this eslint plugin React hooks here We can use this easily in Oxlint and that applies to any through npm or your custom rules that you can write We use JS plugins here because its a JavaScript plugin and we insert it if we run lint again we hit a problem here because it says the React hooks plugins are the implemented natively in Rust within Oxlint Using both the native and JS versions would create ambiguity about which rules to use so thats correct We can use this little snippet and copy that over Basically use the plugin but we give it a different name because we only want to use certain JSbased rules and not all of them So now we can say we use the rules here and one rule we want to use is React hooks JS so thats the specifier we gave it right up here and then the rule name so set state in render and this should be set to error if we save this and run the linting command again thanks to the React compiler we actually see oh yeah here are problems error calling set state during render may trigger an infinite loop That means you can move your React applications over no matter if you use the compiler rules and the others if theyre not supported natively in Oxlint and just use JS plugins Important disclaimer here Yes I mentioned 80% of the ESLint users in the beginning and thats because JS plugins cant do two things at the moment One thing is custom parsers so what wont work is linting Vue svelte angular et cetera templates The script part already works perfectly but the template doesnt Thats something were working on right now The other thing is custom type aware lint rules The lint rules from TypeScript ESLint are mostly covered only two are missing and theyre built into Oxlint But if you have lint rules that are custom written or using a package that needs the information from the TypeScript compiler that wont work at the moment So these are the two biggest issues Other than that things work smoothly and were working on them so let us know if you move over if you have any other problems and how the migration is going Oxfmt Oxfmt got some really good quality of life changes recently like better Vue SFC component formatting support or GraphQL template literals But one thing is here to highlight and that is JS docs When we run plain oxfmt with the default settings then the JS docs are not formatted But luckily since version 0.42 we can set JS doc and just use the defaults by setting an empty object and now if we have a look run it again Perfect We have correctly formatted JS docs You can read them very nicely Now of course if you want to say okay look actually I want to have the spacing for the brackets to say this is set to true because these curlies here are too snug on the word we can do that and now we have a little bit of space here Other options can be found in the docs Community Anthropic released a new version of Claude So not Claude Code not a model no no its about the website and desktop apps Felix Rieseberg here is describing how they moved their architecture over from an SSRbased approach to a static and TanStack router setup On that sense they could straightaway serve it from workers at the edge and reduce their time to first byte by 65% which is quite significant Also prompts were showing up 50% sooner and the navigation went may snappier This is in line with a lot of people say when they move over to a static approach with Vite Nevertheless he says that this is not the end and there are more improvements so I hope to hear more from him about further improvements hopefully also buildtime reductions now with Vite 8 and more And if you have a similar story please drop them down below Really curious to see your numbers and hear how the tooling made your project go faster better improve DX The end these were some of the selected highlights in March and make sure to read the whole recap because there is so much more to cover that we just cant fit in a single video Most importantly also sign up to the newsletter so you get these recaps straight in your inbox and dont miss out on anything I hope to see you in the next recap or online Lets build things together