--- title: "Build-time macros for everyone" publication: "JavaScript Weekly" issue: 679 published_at: "2024-03-14" canonical_url: "https://javascriptweekly.com/issues/679" --- Plus syntax coloring, a modern Express.js setup, and getting Playwright to write your code for you. | #​679 — March 14, 2024 [Read on the Web](https://javascriptweekly.com/issues/679) Together with [![Clerk\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_220,h_64/e_make_transparent/co_white,e_outline:5/j3vhv1hnwqeffgkzzlvu.png)](https://go.clerk.com/v9ZoGMM) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/moq1oa1istublivmxoai.jpg)](https://github.com/devongovett/unplugin-parcel-macros) [Use Parcel Macros in Other Bundlers with `unplugin-parcel-macros`](https://github.com/devongovett/unplugin-parcel-macros) — [Macros](https://parceljs.org/features/macros/), as implemented in Parcel ([and Bun!](https://bun.sh/blog/bun-macros)), 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](https://github.com/devongovett/unplugin-parcel-macros?tab=readme-ov-file#example) of how handy this can be. Devon Govett 𝕏 Devon goes into extra detail [🐦 in this Twitter/X thread.](https://twitter.com/devongovett/status/1767939537907462211) You can also revisit [the release of Parcel 2.12.0](https://parceljs.org/blog/v2-12-0/) to learn more. [![\](https://copm.s3.amazonaws.com/a5c6905f.png)](https://go.clerk.com/v9ZoGMM) [How to Add an Onboarding Flow for your Application](https://go.clerk.com/v9ZoGMM) — 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](https://webkit.org/blog/15131/speedometer-3-0-the-best-way-yet-to-measure-browser-performance/) — Speedometer has been around since 2014, but [this new release](https://browserbench.org/announcements/speedometer3/) is the first with a full collaborative approach involving each major browser engine (Blink, Gecko, WebKit). You can [run the test yourself here.](https://browserbench.org/Speedometer3.0/) Apple, Google, Microsoft, and Mozilla [WinterJS 1.0: A Fast WinterCG and WASM-Compatible JS Runtime](https://wasmer.io/posts/winterjs-v1) — 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](https://deno.com/blog/jsr_open_beta), Deno's attempt at a new JavaScript registry. If that post was too much to digest, they now have [▶️ a 6-minute video introduction](https://www.youtube.com/watch?v=gOfOSRertMA) covering the key motivations and features. - The [Astro](https://astro.build/) folks have unveiled [Astro DB](https://astro.build/db/), a fully managed SQL database designed exclusively for Astro. - 📊 [Benchmarking Node vs LLRT/QuickJS.](https://learnaws.io/blog/node-vs-llrt) - [f(x)](https://github.com/antonmedv/fx) is a _fantastic_ terminal-based JSON viewer app (written in Go, but it can integrate with JS functions) – [its latest version](https://github.com/antonmedv/fx/releases/tag/32.0.0) supports YAML too. **RELEASES:** - [Biome 1.6](https://biomejs.dev/blog/biome-v1-6/) – The toolchain gets partial support for Astro, Svelte & Vue files. - [D3.js 7.9](https://d3js.org/) – Popular data visualization library. They launched [a fantastic new homepage](https://d3js.org/) several months ago too, if you haven't checked in for a while. - [React Native Skia 1.0](https://shopify.github.io/react-native-skia/) – Complete with [▶️ a launch video.](https://www.youtube.com/watch?v=eUbj_NxcgKg) - [Node.js v21.7.1](https://nodejs.org/en/blog/release/v21.7.1), [Cypress 13.7](https://docs.cypress.io/guides/references/changelog#13-7-0), [Angular 17.3](https://github.com/angular/angular/releases/tag/17.3.0), [Ember 5.7](https://blog.emberjs.com/ember-released-5-7/) 📒 Articles & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/vtv6z8vromnqbqrdmfzr.jpg)](https://www.maartenhus.nl/blog/comparing-javascript-frameworks-part-1-templates/) [Comparing JavaScript Frameworks: Templates](https://www.maartenhus.nl/blog/comparing-javascript-frameworks-part-1-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](https://www.youtube.com/watch?v=Be7X6QJusJA) — 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](https://blog.stackblitz.com/posts/design-systems/?utm_source=js-weekly&utm_medium=secondary&utm_campaign=design-systems) — 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](https://www.totaltypescript.com/make-your-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](https://jvns.ca/blog/2024/03/08/how-head-works-in-git/) Julia Evans 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/sjuij9thetnn1z7nfbxq.jpg)](https://shiki.style/) [Shiki 1.0: A Powerful Syntax Highlighter](https://shiki.style/) — A few months ago, we linked to [Shikiji](https://shikiji.netlify.app/), a fork of Shiki that was created to push the project forward. Happily, the creators of both libraries decided to [join forces](https://github.com/shikijs/shiki/pull/557) and [Shiki 1.0 was born.](https://nuxt.com/blog/shiki-v1) It’s a syntax highlighter based on TextMate grammar and themes, the same engine as used by VS Code. [The docs](https://shiki.style/guide/) are good. Pine Wu, Anthony Fu [Rolldown: A Rust-Powered Bundler for JavaScript](https://rolldown.rs/) — A new entry to an increasingly crowded market, but they [explain why they’re building it here](https://rolldown.rs/about) – it’s intended to underpin a future bundler to be used in [Vite](https://vitejs.dev/), rather than esbuild and Rollup. [GitHub repo.](https://github.com/rolldown-rs/rolldown) Rolldown [Breakpoints and `console.log` Is the Past, Time Travel Is the Future](https://wallabyjs.com?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more. Wallaby Team sponsor [Storybook 8 Released](https://storybook.js.org/blog/storybook-8/) — 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](https://www.youtube.com/watch?v=eUcVttkFAsM) to enjoy. Michael Shilman (Storybook) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/csgi0ob3ldvrluk8vy8j.jpg)](https://playwright.dev/docs/codegen) [The Playwright Test Generator](https://playwright.dev/docs/codegen) — I don't know why I’ve not linked this before, as it’s _so_ useful. [Playwright](https://playwright.dev/) 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](https://hookdeck.com?ref=jsweekly-679) — 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](https://tinybase.org/) — If you want a bit more database-esque structure around the management of state in your apps, this is worth a try. The [demos](https://tinybase.org/demos/) show it off well. [v4.7](https://tinybase.org/guides/releases/#v4-7) adds support for Turso’s [LibSQL](https://turso.tech/libsql) (a fork of SQLite). James Pearce et al. [⌘K 1.0: A Composable, Unstyled 'Command Menu' for React Apps](https://cmdk.paco.me/) — The home page includes some neat examples in a variety of styles. [GitHub repo](https://github.com/pacocoursey/cmdk). Paco Coursey [webtoon/PSD: Zero-Dependency PSD Parser for Browsers and Node](https://webtoon.github.io/psd/) — PSD (**P**hoto**s**hop **D**ocument) 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](https://knip.dev/) – Find unused files, dependencies and exports. - [React Date Picker 6.3](https://github.com/Hacker0x01/react-datepicker) – Simple date picker component. ([Demo](https://reactdatepicker.com/).) - [OverlayScrollbars 2.6](https://kingsora.github.io/OverlayScrollbars/) – JavaScript custom scrollbars plugin. - 🗓 [date-fns 3.4](https://date-fns.org/) – Modern JavaScript date utility library. - [Slonik 37.3](https://github.com/gajus/slonik) – Node.js Postgres client with type safety. - [MQTT.js 5.4](https://github.com/mqttjs/MQTT.js) – MQTT client for Node and browsers. - [Perspective 2.9](https://perspective.finos.org/) – Fast visualization of streaming datasets. - [Rspack 0.5.7](https://github.com/web-infra-dev/rspack/releases/tag/v0.5.7) – Fast Rust-based web bundler. Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/cooperx86) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom