The final boss of build tools

Today’s issue: The case against barrel files, a microsite for microframeworks, and what HTTP imports taught me about flaming out of the Olympic trials.

Welcome to #310.

---

The final boss of build tools

Last October, we wrote about Vite’s ambitious goal of becoming “the shared foundation for higher-level innovations in the web ecosystem.” And after just 10 months, it feels like we can pretty much say… mission accomplished?

We’ve seen Remix migrate to Vite, Angular use it for their dev server, and dozens of other frameworks and libraries build on top of it. This has caused Vite’s npm downloads to double yet again to 14 million per week.

In fact, Next.js is currently the only JavaScript meta-framework that doesn’t use Vite in some way (for their own turbo-tastic reasons), but the rest of the JS ecosystem has united under the lightning bolt banner.

So what’s next for Vite? According to Evan You’s recent keynote, the team plans to expand on their original goal by forming “a completely unified toolchain that can handle your JavaScript and TypeScript source – all the way from source file to AST, to linting, formatting, unit testing, transforming, bundling, minification, all the way to production, at native speed.”

Here’s what they’re currently building to make that happen:

• Environment API – Currently experimental in Vite 6 alpha, this lower-level construct will provide better support for frameworks that run in multiple environments like the browser, Node.js, and workers.

• Rolldown – This Rust-based bundler is still a WIP and aims to provide full compatibility with Rollup (Vite’s current bundler), plus new features like more advanced chunk splitting and module federation.

• OXC – This JavaScript compiler is also written in Rust and provides super fast parsing, linting, and resolving, with more functionality planned for the future.

Bottom Line: Multiple OSS projects and VC-backed startups have tried and failed to build a unified, Rust-based toolchain like this. But now that Vite has conquered all of its other goals, it makes sense for the team to try and tackle the final boss of build tools. I wouldn’t bet against them.

---

Ship faster with Postgres on Neon

Postgres is the world’s most popular open-source database for a reason – but it’s also easy to get stuck wasting weeks on complex configs and maintenance.

That’s where Neon can help. They offer fully managed Postgres with features designed to help you ship faster:

• Your DB automatically adapts to your app’s workload, eliminating the need for over-provisioning or manual resource allocation.

• Instantly create ready-to-use Development/Preview/Test databases (with both schema and data) that shut down when unused.

• You can restore your database in seconds to any point in the past 30 days, 24 hours, or even 1 minute ago.

Get started with their generous free tier, and provision your Postgres database in under a second. Seriously, it’s that fast.

---

function stressTest() {
  console.time('Total Stress Test Duration');

  const arraySize = Math.pow(2, 32);
  let largeArray = new Array(arraySize).fill(0);

  console.time('Populate Array');
  largeArray = largeArray.map(() => Math.floor(Math.random() * 1000));
  console.timeEnd('Populate Array');

  console.time('Sort Array');
  largeArray.sort((a, b) => a - b);
  console.timeEnd('Sort Array');

  console.time('Filter Even Numbers');
  const oddArray = largeArray.filter(num => num % 2 !== 0);
  console.timeEnd('Filter Even Numbers');

  console.time('Square Numbers');
  const squaredArray = oddArray.map(num => num * num);
  console.timeEnd('Square Numbers');

  console.time('Sum of Numbers');
  const sum = squaredArray.reduce((acc, num) => acc + num, 0);
  console.timeEnd('Sum of Numbers');

  console.timeEnd('Total Stress Test Duration');
}

stressTest();

---

1. Ryan Dahl wrote about What Deno got wrong about HTTP imports and how they’re addressing it. I just wish that my competitive dressage coach had that same level of introspection after I flamed out of the Olympic trials.

2. Jake Archibald wrote about how JavaScript garbage collection doesn’t work as he expected when it comes to closures.

3. James Cowling built Cronvex – an implementation of user space crons that can be used to register periodic jobs that call third-party http endpoints. It’s similar to EasyCron or FastCron, but completely free, open source, and built on top of Convex. [sponsored]

4. TkDodo wrote a blog post imploring you to Please stop using barrel files – no matter how much fun it is to yell “get barreled!” every time you do.

5. The TypeScript 5.6 beta introduces errors on suspicious truthish/nullish checks, new iterator methods like .map() and .filter(), and more.

6. Brenley Dueck wrote Battle of the Asyncs to compare the async primitives of React vs Solid.js.

7. microjs is a micro-site dedicated to helping you find useful micro-frameworks, which, according to my doctor, work just as well as a regular framework.

8. Apryse’s HTML pdf viewer lets you easily embed a PDF viewer on your site with advanced features, a consistent viewing experience and full customization. Trust me, your users will thank you. [sponsored]

9. Porffor is an experimental AOT JavaScript engine that compiles JS code to Wasm or native code.

10. Stack Overflow just released their 2024 Developer Survey. TLDR: most developers don’t really trust AI tools (but everyone uses them), most developers aren’t happy at work (but are terrified of being laid off), and we’re all drowning in technical debt (but no one wants to clean it up). Sounds about right.

---

function stressTest() {
  console.time('Total Stress Test Duration');

  const arraySize = Math.pow(2, 32);
  let largeArray = new Array(arraySize).fill(0);

  console.time('Populate Array');
  largeArray = largeArray.map(() => Math.floor(Math.random() * 1000));
  console.timeEnd('Populate Array');

  console.time('Sort Array');
  largeArray.sort((a, b) => a - b);
  console.timeEnd('Sort Array');

  console.time('Filter Even Numbers');
  const oddArray = largeArray.filter(num => num % 2 !== 0);
  console.timeEnd('Filter Even Numbers');

  console.time('Square Numbers');
  const squaredArray = oddArray.map(num => num * num);
  console.timeEnd('Square Numbers');

  console.time('Sum of Numbers');
  const sum = squaredArray.reduce((acc, num) => acc + num, 0);
  console.timeEnd('Sum of Numbers');

  console.timeEnd('Total Stress Test Duration');
}

stressTest();

The bug is that the array’s size is too large. The maximum size of an array is 2^32 - 1.

// const arraySize = Math.pow(2, 32);
const arraySize = Math.pow(2, 32) - 1;

In ECMAScript, the length property of an array is a 32-bit unsigned integer, which limits the maximum number of entries an array can have. Because the length property represents the number of entries, and it’s zero-based, the maximum length is Math.pow(2, 32) - 1. #themoreyouknow