---
title: "JSR isn't another tool, it's a fundamental shift"
publication: "JavaScript Weekly"
issue: 685
published_at: "2024-04-25"
canonical_url: "https://javascriptweekly.com/issues/685"
---

Plus Node 22 and pnpm 9.0 land, the tale of a Bun migration, and the problems with new URL(). |        

#​685 — April 25, 2024 

[Read on the Web](https://javascriptweekly.com/issues/685)  

Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/javascript-quiz/?utm_source=email&utm_medium=javascriptweekly&utm_content=javascriptquiz)   

JavaScript Weekly 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/w7s2mi67kd3de45tfmay.jpg)](https://deno.com/blog/jsr-is-not-another-package-manager)  

[JSR is Not _Another Package Manager_](https://deno.com/blog/jsr-is-not-another-package-manager) — When Ryan created Node, JavaScript had no packages or standard module system. npm and CommonJS took off, and tools like Yarn or pnpm extended npm in certain areas, but in today's ES modules era, it’s time for a transformation. [JSR](https://jsr.io/) is not merely a new npm, but a _shift_ in how packages are distributed, tailored for the modern era. 

Ryan Dahl   

[Node.js v22 (Current) Released](https://openjsf.org/blog/nodejs-22-available) — The newest, cutting edge, major version of Node lands with some key enhancements. v22 becomes the new ‘current’ release (becoming active LTS in October). It adds support for `require`-ing ESM, gets a built-in WebSocket client, upgrades to V8 12.4, and includes [a task runner](https://polar.sh/anonrig/posts/node-js-task-runner) (e.g. `node --run task_name`). [This blog post](https://coderoasis.com/nodejs-22-released/) takes a closer look. 

Rafael Gonzaga   

💡 If you're a Node developer, be sure to subscribe to [Node Weekly](https://nodeweekly.com/) as well, where we go into more depth of server-side JavaScript each week.  [![\](https://copm.s3.amazonaws.com/a2216579.png)](https://frontendmasters.com/courses/javascript-quiz/?utm_source=email&utm_medium=javascriptweekly&utm_content=javascriptquiz) 

[Lydia Hallie Tests Your JavaScript Knowledge](https://frontendmasters.com/courses/javascript-quiz/?utm_source=email&utm_medium=javascriptweekly&utm_content=javascriptquiz) — Challenge your core knowledge with 50 interactive quiz questions covering topics like the event loop, scopes and closures, classes and prototypes, garbage collection, and more. After each question, you'll get an in-depth visual explanation from Lydia to deepen your understanding of fundamental JS concepts. 

Frontend Masters sponsor   

[pnpm 9.0: The Efficiency-Focused Package Manager](https://github.com/pnpm/pnpm/releases/tag/v9.0.0) — [pnpm](https://pnpm.io/) has long been a fantastic option for folks looking to save disk space and CPU cycles (or for its great [monorepo support](https://pnpm.io/workspaces)) while maintaining most of what makes npm great. v9.0 drops Node 16 and 17 compatibility, honors the `packageManager` field in `package.json`, makes some default config changes, and adopts Lockfile v9. 

pnpm   

**IN BRIEF:** 

- 🙈 Yesterday was [JS Naked Day](https://js-naked-day.org/), a day to go entirely without JavaScript. Sadly we missed it.. 😏
- 🇫🇷 [dotJS 2024](https://www.dotjs.io/) is a JavaScript conference taking place in Paris, France on June 27. The speaker roster so far is pretty compelling.
- [rcompat](https://primatejs.com/blog/introducing-rcompat) is an interesting JS interoperability and runtime compatibility layer for servers, so you can avoid the differences between Node, Deno and Bun. 

**RELEASES:** 

- [React Native 0.74](https://reactnative.dev/blog/2024/04/22/release-0.74)
- [Electron 30.0](https://www.electronjs.org/blog/electron-30-0) – Now with Chromium 124, V8 12.4, and Node.js 20.11.1.
- [Hexo 7.2](https://hexo.io/) – Static site generator for blogging.
- [Ember 5.8](https://blog.emberjs.com/ember-released-5-8/), [Ionic 8](https://ionic.io/blog/ionic-8-is-here), [SWC 1.5](https://github.com/swc-project/swc), [Knip 5.10.0](https://github.com/webpro/knip/releases/tag/5.10.0)  

📒 Articles & Tutorials  

[A Tale of Migrating a Project to Bun](https://render.com/blog/hello-bun-deploy-2x-faster-on-github-render) — Eric, an engineer at Render, walks through the steps of how he migrated his [Sveld](https://github.com/carbon-design-system/sveld) project to [Bun](https://bun.sh/) (replacing Yarn and Vitest in the process), including some minor gotchas he encountered, and what the speed gains were. 

Eric Liu   

[The Frontend Developer/Engineer Handbook 2024](https://frontendmasters.com/guides/front-end-handbook/2024/) — A guide to the current webdev landscape, covering how to get up to speed on topics like editors, CSS, UX, UI, the command line, tools and frameworks, perf, accessibility, etc. 

Cody Lindley   

[3 Reasons to Use JavaScript Libraries for Graph Visualization](https://campaigns-linkurious.cleverstory.io/why-choose-js-graph-library) — Easily add network visualization capabilities to your applications, while cutting down on dev time. 

Linkurious sponsor   

[HTML Attributes vs DOM Properties](https://jakearchibald.com/2024/attributes-vs-properties/) — They’re different, but often coupled. Jake outlines the the difference, and why it matters. 

Jake Archibald   

▶[A Node.js Streams Masterclass](https://www.youtube.com/watch?v=edB964-YYpE) — An hour-long odyssey with the creator of Fastify (and Node.js TSC member) into the world of streams. _A stream is like an array over time.._ we learn, before going into live coding and demos. 

Matteo Collina   

[How I Fixed My Brutal TTFB (Time to First Byte)](https://blog.sentry.io/how-i-fixed-my-brutal-ttfb/?utm_medium=paid-community&utm_source=javascriptweekly&utm_campaign=fy25q1-jtbd-ttfb&utm_content=newsletter-jtbd-ttfb-learnmore) — All it took was two small changes to how data is fetched to reduce the p75 TTFB from 3.46s to just 704ms. [Learn more](https://blog.sentry.io/how-i-fixed-my-brutal-ttfb/?utm_medium=paid-community&utm_source=javascriptweekly&utm_campaign=fy25q1-jtbd-ttfb&utm_content=newsletter-jtbd-ttfb-learnmore). 

Sentry sponsor   

📄 [The Problem with `new URL()`, and How `URL.parse()` Fixes That](https://kilianvalkhof.com/2024/javascript/the-problem-with-new-url-and-how-url-parse-fixes-that/) Kilian Valkhof 

📄 [The `Intl.Segmenter` Object is Now Part of Baseline](https://web.dev/blog/intl-segmenter) – Interoperable, locale-sensitive text segmentation. Rachel Andrew 

📄 [Event Dispatch in Angular](https://blog.angular.io/event-dispatch-in-angular-89d868d2351c) – Under-the-hood of the new event delegation system. Ramanathan and Wilkinson 

📄 [The Making of a TypeScript Feature: Inferring Type Predicates](https://effectivetypescript.com/2024/04/16/inferring-a-type-predicate/) Dan Vanderkam 

📄 [Adding ESLint and Auto-Fixing an Existing TypeScript Project](https://code.dblock.org/2024/04/23/adding-eslint-and-autofixing-an-existing-typescript-project.html) Daniel Doubrovkine 

📺 [Using TC39 Proposed Signals in React and Svelte Today](https://www.youtube.com/watch?v=HSVcZa5yTKE) – Jack Herrington 

📄 [Quirks of Escaping JavaScript for a `script` Tag](https://jameshfisher.com/2024/04/24/how-to-escape-javascript-for-a-script-tag/) James Fisher  

🛠 Code & Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/jxmrv1tujz9zjlli4hep.jpg)](https://unovis.dev/)  

📊 [Unovis: A Modular Data Visualization Framework](https://unovis.dev/) — Works with React, Angular, Svelte, Vue or plain old JS/TS. Handles all sorts of things from Sankey diagrams to maps, graphs, chord diagrams, and traditional line/area charts. [The v1.4 release](https://unovis.dev/releases/1.4/) adds support for _annotating_ visualizations in a flexible way. There’s [a gallery of examples](https://unovis.dev/gallery) (with code) if you want to dig in. 

F5, Inc.   

[Transformational Auth & Identity | Userfront](https://userfront.com/?&utm_source=javascriptweekly-com&utm_medium=newsletter_sponsored_link&utm_campaign=magnitude&utm_content=transformational) — "Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use." 

Userfront sponsor   

[ReScript 11.1 Released with Improved JSX Support](https://rescript-lang.org/blog/release-11-1-0) — [ReScript](https://rescript-lang.org/) is an OCaml-inspired, typed language that compiles to JavaScript and has a JSX transform built into the language. JSX support was previously solely for React use cases, but now works with Vue, Preact, and other approaches too. 

The ReScript Project   

[typed-xlsx: Feature-Rich Type-Safe Excel Reporting](https://typed-xlsx.vercel.app/) — Define a strongly typed spreadsheet schema, then populate and work with the sheets directly from JS/TS, such as for generating reports for users – [example code](https://github.com/ChronicStone/typed-xlsx?tab=readme-ov-file#2-build-a-sheet-schema-). Wraps around SheetJS. [GitHub repo](https://github.com/ChronicStone/typed-xlsx). 

Cyprien Thao   

[Devalue 5.0: Like `JSON.stringify`, But..](https://github.com/Rich-Harris/devalue) — _“Gets the job done when JSON.stringify can’t.”_ Namely, it can handle cyclical and repeated references, regular expressions, `Map` and `Set`, custom types, and more. 

Rich Harris   

[imask.js 7.6.0: A Vanilla JavaScript Input Mask](https://imask.js.org/) — Prevent users from entering invalid values. Has plugins for Vue, Angular, React, Svelte, and Solid, as needed. 

imaskjs   

[browser-or-node 3.0: Figure Out Where Your Code is Running](https://www.npmjs.com/package/browser-or-node) — Provides a simple way to tell if your code is currently running in a browser, in Node, in a Web Worker, or in Deno. Works with both ESM and CJS imports. 

Dinesh Pandiyan   

- [MistCSS 0.4](https://typicode.github.io/mistcss/) – Create components using only CSS, i.e. JS-from-CSS. [v0.4](https://github.com/typicode/mistcss/releases/tag/v0.4.0) adds Hono and CSS variable support.
- [Accessible Autocomplete 3.0](https://github.com/alphagov/accessible-autocomplete) – The UK government's very own autocompleting input component. ([Examples.](https://alphagov.github.io/accessible-autocomplete/examples/))
- [Mercurius 14.1](https://github.com/mercurius-js/mercurius) – Implement GraphQL servers and gateways on Fastify.
- [Vision Camera 4.0](https://github.com/mrousavy/react-native-vision-camera/releases/tag/v4.0.0) – Advanced camera control for React Native.
- [webdav-client 5.6](https://github.com/perry-mitchell/webdav-client) – WebDAV client library for Node & browsers.
- 🐍 [JSPyBridge 1.2](https://github.com/extremeheat/JSPyBridge) – Run Python from Node or vice versa.
- [MUI X 7.3](https://github.com/mui/mui-x/releases/tag/v7.3.0) – Popular React component suite.         

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