Build-time macros for everyone

#​679 — March 14, 2024

Read on the Web

JavaScript Weekly

Use Parcel Macros in Other Bundlers with unplugin-parcel-macros— Macros, as implemented in Parcel (and Bun!), are JS functions that run at build time whose results are inlined into a bundle in place of the original call. You can now use this feature with webpack, Vite, Rollup, esbuild, etc. Here's a quick example of how handy this can be.

Devon Govett

𝕏 Devon goes into extra detail 🐦 in this Twitter/X thread. You can also revisit the release of Parcel 2.12.0 to learn more.

How to Add an Onboarding Flow for your Application— Learn to enhance onboarding for your app with Clerk and Next.js: add custom session tokens, configure Next.js middleware for session data, and auto-update user metadata for a streamlined, code-efficient user experience with minimal code.

Clerk sponsor

Speedometer 3.0: The Best Way Yet to Measure Browser Performance— Speedometer has been around since 2014, but this new release is the first with a full collaborative approach involving each major browser engine (Blink, Gecko, WebKit). You can run the test yourself here.

Apple, Google, Microsoft, and Mozilla

WinterJS 1.0: A Fast WinterCG and WASM-Compatible JS Runtime— WinterJS initially pitched itself as a Rust and SpiderMonkey-powered ‘Service Workers server’ but now simply boasts being the fastest WinterCG-compatible JavaScript web server full stop. The ability to run JITed JS workloads entirely under WebAssembly is next on their radar.

Wasmer

IN BRIEF:

• Last week we linked to JSR, Deno's attempt at a new JavaScript registry. If that post was too much to digest, they now have ▶️ a 6-minute video introduction covering the key motivations and features.

• The Astro folks have unveiled Astro DB, a fully managed SQL database designed exclusively for Astro.

• 📊 Benchmarking Node vs LLRT/QuickJS.

• f(x) is a fantastic terminal-based JSON viewer app (written in Go, but it can integrate with JS functions) – its latest version supports YAML too.

RELEASES:

• Biome 1.6– The toolchain gets partial support for Astro, Svelte & Vue files.

• D3.js 7.9– Popular data visualization library. They launched a fantastic new homepage several months ago too, if you haven't checked in for a while.

• React Native Skia 1.0– Complete with ▶️ a launch video.

• Node.js v21.7.1, Cypress 13.7, Angular 17.3, Ember 5.7

📒 Articles & Tutorials

Comparing JavaScript Frameworks: Templates— A thorough comparison of the template languages used by React, Vue, Angular and Svelte. Interesting analysis and this looks set to turn into a great series.

Maarten Hus

▶  Setting up an Express.js App with TypeScript in 2024— This hour-long video isn't about building an entire app, but getting everything set up and working in a clear, easy to follow way, including a variety of modern DX niceties.

Anson the Developer

5 Lessons Design Systems Teams Can Learn from Open-Source Maintainers— Design system teams must balance evangelism with maintenance and development. Turns out, the same is true of open source.

StackBlitz sponsor

Make Your TypeScript Functions More Reusable with Generics— Matt kicks this off with a challenge for you to consider, before showing how to make a function more flexible and type-safe by using type parameters instead of any.

Matt Pocock

How HEAD Works in Git
Julia Evans

🛠 Code & Tools

Shiki 1.0: A Powerful Syntax Highlighter— A few months ago, we linked to Shikiji, a fork of Shiki that was created to push the project forward. Happily, the creators of both libraries decided to join forces and Shiki 1.0 was born. It’s a syntax highlighter based on TextMate grammar and themes, the same engine as used by VS Code. The docs are good.

Pine Wu, Anthony Fu

Rolldown: A Rust-Powered Bundler for JavaScript— A new entry to an increasingly crowded market, but they explain why they’re building it here– it’s intended to underpin a future bundler to be used in Vite, rather than esbuild and Rollup. GitHub repo.

Rolldown

Breakpoints and console.log Is the Past, Time Travel Is the Future— 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.

Wallaby Team sponsor

Storybook 8 Released— The popular front-end component workshop introduces built-in visual testing, support for React Server Components, up to 50% faster start times, Vite 5 support, and upgraded Vue and React control auto-generation. There’s also ▶️ a launch video to enjoy.

Michael Shilman (Storybook)

The Playwright Test Generator— I don't know why I’ve not linked this before, as it’s so useful. Playwright isn’t just a library for controlling browsers from JavaScript, but also includes a tool for generating tests and page navigation code from your own interactions. Hit record, do stuff, and code is written.

Microsoft

Managed Reliability & Observability for Webhooks & Asynchronous Messaging— Send, receive, authenticate, transform, filter, & route events between 3rd-party APIs (Stripe, Shopify, Twilio, etc.) & serverless functions.

Hookdeck sponsor

TinyBase 4.7: A Reactive Data Store for Local-First Apps— If you want a bit more database-esque structure around the management of state in your apps, this is worth a try. The demos show it off well. v4.7 adds support for Turso’s LibSQL (a fork of SQLite).

James Pearce et al.

⌘K 1.0: A Composable, Unstyled 'Command Menu' for React Apps— The home page includes some neat examples in a variety of styles. GitHub repo.

Paco Coursey

webtoon/PSD: Zero-Dependency PSD Parser for Browsers and Node— PSD (Photoshop Document) is the format used by Photoshop and this library lets you dig into metadata and pixels on each image layer.

webtoon inc

• Knip 5.1– Find unused files, dependencies and exports.

• React Date Picker 6.3– Simple date picker component. (Demo.)

• OverlayScrollbars 2.6– JavaScript custom scrollbars plugin.

• 🗓 date-fns 3.4– Modern JavaScript date utility library.

• Slonik 37.3– Node.js Postgres client with type safety.

• MQTT.js 5.4– MQTT client for Node and browsers.

• Perspective 2.9– Fast visualization of streaming datasets.

• Rspack 0.5.7– Fast Rust-based web bundler.