---
title: "Svelte 4 released"
publication: "JavaScript Weekly"
issue: 644
published_at: "2023-06-22"
canonical_url: "https://javascriptweekly.com/issues/644"
---

Plus the utility of 'using', doing AI work from JavaScript, and Deno's Fresh gets a full-time maintainer. |        

#​644 — June 22, 2023 

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

Together with [![Bryntum\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_560,h_100/e_make_transparent/co_white,e_outline:7/hs9vs3jkbbbrfz0twgvk.png)](https://bryntum.com/?utm_source=newsletter&utm_medium=email&utm_id=jsweekly-primary-20230616)  

JavaScript Weekly 

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

[UnsuckJS: Comparing Lightweight JavaScript Options](https://unsuckjs.com/) — _"No build tools, no compilers, and no hassle."_ It’s a table of frontend JavaScript libraries on a simple page – that’s it! But it’s a handy table, letting you see the relative popularity, size, and latest versions of libraries as diverse as Preact, bau, htmx, Hyperapp, and Mithril. 

Adam Hill   

[Svelte 4 Released](https://svelte.dev/blog/svelte-4) — Four years on from [Svelte 3.0](https://svelte.dev/blog/svelte-3-rethinking-reactivity) comes the latest major release of the popular compile-time framework that isn’t afraid to do things its own way. If you’re new to it, [hit the interactive tutorial](https://learn.svelte.dev/tutorial/welcome-to-svelte) to get a feel for things, or if you’re already a user, enjoy the [v3 to v4 migration guide](https://svelte.dev/docs/v4-migration-guide), [overhauled site](https://svelte.dev/), and extra performance on offer. 

Rich Harris and the Svelte Team   

🤔 Claudio Holanda's '[Thoughts on Svelte(Kit), one year and 3 billion requests later](https://claudioholanda.ch/en/blog/svelte-kit-after-3-billion-requests/)' provides some interesting balance to our cheerleading.  [![\](https://copm.s3.amazonaws.com/65cd507f.png)](https://bryntum.com/?utm_source=newsletter&utm_medium=email&utm_id=jsweekly-primary-20230616) 

[The Complete UI Component Library For Enterprise Web Apps](https://bryntum.com/?utm_source=newsletter&utm_medium=email&utm_id=jsweekly-primary-20230616) — A professional UI component library with power widgets like data grid, calendar, scheduler & Gantt charts. Includes API docs, guides and an unreasonable amount of demos to play with. Seamlessly integrates with React, Angular, Vue & Salesforce apps. 

Bryntum sponsor   

[A Look at TypeScript 5.2's New Keyword: `using`](https://www.totaltypescript.com/typescript-5-2-new-keyword-using) — `using` brings something akin to Python’s `with` context management into TypeScript by providing a way to automatically run a `Symbol.dispose` function when an object leaves scope. You could use this to shut down database connections, close file handles, etc. 

Matt Pocock   

If you're not a TS fan, the idea behind `using` is [also an ECMAScript proposal](https://github.com/tc39/proposal-explicit-resource-management) (currently at stage 3) called _Explicit Resource Management_ and there's more detail to enjoy in [their examples.](https://github.com/tc39/proposal-explicit-resource-management#motivations)  

[The 'Getting Started with AI' Stack](https://a16z.com/2023/06/21/the-getting-started-with-ai-stack-for-javascript/) — Andreessen Horowitz (a.k.a. a16z) is a well known VC firm, but they also have an engineering team of their own that has come up with a [“getting started with AI” template](https://github.com/a16z-infra/ai-getting-started) for JavaScript devs who want to play with modern ML technologies without too much thinking about tooling. 

Li, Li, and Casado (Andreessen Horowitz)   

**⚡️ IN BRIEF:** 

- _The Register_ reports malicious actors are exploiting expired S3 buckets to [inject harmful code into legitimate npm packages](https://www.theregister.com/2023/06/19/npm_s3_buckets_malware/) without needing to modify existing code.
- Fresh, a Deno-first full-stack Web framework, has a new release in the shape of [Fresh 1.2.](https://deno.com/blog/fresh-1.2) There have been some concerns over its maintenance, but now there's a new full-time maintainer, Marvin Hagemeister, and a lot of promise on the horizon. Welcome Marvin!   

**RELEASES:** 

- [Node.js 20.3.1, 18.16.1 and 16.20.1](https://nodejs.org/en/blog/vulnerability/june-2023-security-releases) – Security releases.
- [React Native 0.72](https://reactnative.dev/blog/2023/06/21/0.72-metro-package-exports-symlinks)
- [Nest 10.0](https://github.com/nestjs/nest) – Popular Node.js framework for building enterprise-grade apps.
- [ESLint 8.43](https://eslint.org/blog/2023/06/eslint-v8.43.0-released/)  

📒 Articles & Tutorials  

[Synchronizing Videos or 3D Model Rotations to Scroll Driven Animations](https://www.bram.us/2023/06/21/synchronize-videos-3d-models-to-scroll-driven-animations/) — With just a little JavaScript, you can control 3D models and/or videos using scroll-driven animations. It’s a common effect seen on modern fashion sites. 

Bramus van Damme   

▶[Recreating a JS Runtime to Understand Node's Magic](https://www.youtube.com/watch?v=UdTdBknk23A) — Popular speaker, educator, Microsoft MVP _and_ Node.js core team member Erick gives a very enthusiastic talk on the latest ‘hello world’ in the JavaScript world: building a runtime 😏 Somehow, Erick manages to run through the key concepts involved in just 20 minutes. 

Erick Wendel   

[E-Commerce Simplified](https://www.storyblok.com/tp/build-store-with-commercetools-react?utm_source=javascriptweekly&utm_medium=email&utm_campaign=DGM_DEV_CP_TRA&utm_content=javaweekly_newsletter_JUNE23) — A practical guide to building your Store with Storyblok, Commercetools, and React.js. 

Storyblok sponsor   

[Positioning Anchored Popovers](https://hidde.blog/positioning-anchored-popovers/) — Popovers are commonly positioned relative to their invoker — but when using the new `popover` attribute, anchoring can be tricky as these popovers are placed in the top layer, away from the context of their invoker. Hidde looks at options to resolve this. 

Hidde de Vries   

▶[React Server Components in Under Seven Minutes](https://www.youtube.com/watch?v=1YCccF3Bu3Q) — Looking to quickly get a basic handle on RSCs? This fast-paced video tries to bootstrap you on the subject. 

CodeLit   

[A Visual Guide to Understanding Node's Event Loop](https://www.builder.io/blog/visual-guide-to-nodejs-event-loop) 
Vishwas Gopinath   

[Where to Host Your Remix App in 2023](https://www.jacobparis.com/content/where-to-host-remix) 
Jacob Paris  

🛠 Code & Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/iugdtckn0zsma7chxry2.jpg)](https://github.com/daybrush/selecto)   

[Selecto.js: Make Elements Selectable Within a Drag Area](https://github.com/daybrush/selecto) — Let’s say you have a number of elements that represent choices, data, whatever, and you want users to be able to select a subset of them by clicking/pointing and dragging. That’s what this does. [Live examples here](https://daybrush.com/selecto/storybook/?path=/story/selecto--welcome). 

Daybrush (Younkue Choi)   

[Tuple – The Fastest Way to Onboard New Devs](https://tuple.app?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=sponsorship-blitz&utm_content=JavaScript+Weekly_Onboarding+Link) — Waste hours verbally steering on Zoom? New hires learn your codebase faster with Tuple. Trusted by over 40,000 devs. 

Tuple sponsor   

[AutoAnimate: Add Motion to Your Apps with a Single Line of Code](https://auto-animate.formkit.com/) — You can view some nice examples on the page and this can be used with React, Vue, Svelte, or just plain JavaScript. 

FormKit   

[Toad Scheduler: In-Memory Node _and_ Browser Job Scheduler](https://github.com/kibertoad/toad-scheduler) — Provides more structure than `setTimeout` or `setInterval` and supports cron-style scheduling. 

Igor Savin   

[Kysely: A Fluent, Type-Safe SQL Query Builder](https://kysely.dev/) — Inspired by Knex and targeting Node, it also works in Deno and the browser and boasts a good autocompletion experience thanks to its fluent API. [GitHub repo](https://github.com/kysely-org/kysely). 

Sami Koskimäki   

[AI.JSX: A JSX-Powered AI App Framework](https://github.com/fixie-ai/ai-jsx) — It’s _not_ React, but gives a React-like feel to letting you specify how large language models, such as ChatGPT, should integrate with your app. Luckily there’s a [set of tutorials](https://docs.ai-jsx.com/category/tutorial). 

Fixie.ai   

[Generate SBOMs Effortlessly with Snyk](https://snyk.io/blog/generate-sbom-javascript-node-js-applications/?utm_campaign=aom_2023&utm_medium=paid-email&utm_source=cooperpress-javascript-weekly&utm_content=generate-sbom-javascript-node-js-applications) 

Snyk sponsor   

💡 An SBOM is a _"software bill of materials"_ – essentially an inventory of dependencies and components that make up an application, as [Liran Tal explains](https://snyk.io/blog/generate-sbom-javascript-node-js-applications/?utm_campaign=aom_2023&utm_medium=paid-email&utm_source=cooperpress-javascript-weekly&utm_content=generate-sbom-javascript-node-js-applications).  

🐼 [Panda CSS: Modern, Build-Time, Type-Safe CSS-in-JS](https://panda-css.com/) — A new DX-focused CSS-in-JS approach boasting build-time generated styles and type safety out of the box. It works with Remix, Vite, Next.js, Astro, and server components. 

Segun Adebayo   

[React Wrap Balancer 1.0: A Component for Better Displayed Title Text](https://react-wrap-balancer.vercel.app/) — A component that improves the rendering of _titles_ by avoiding overhanging words. [v1.0](https://github.com/shuding/react-wrap-balancer/releases/tag/1.0.0) is a key release that lets the component use the native CSS `text-wrap` property when supported. 

Shu Ding   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/dl3r4oqwzvsbok7dcsrn.jpg)](https://github.com/finos/perspective)  

- [Perspective 2.3](https://github.com/finos/perspective) – Data visualization and analytics component. The core is written in C++ and compiled to WebAssembly where it can [be used from JavaScript](https://perspective.finos.org/docs/js.html).
- [Tesseract.js 4.1.1](https://github.com/naptha/tesseract.js) – Pure JS OCR for 100+ languages. Fixes a key bug for [processing images taken with iOS devices](https://github.com/naptha/tesseract.js/issues/783#issuecomment-1599362780).
- [Shoelace 2.5](https://shoelace.style/)
 ↳ Well designed, framework agnostic UI component suite.
- [TestCafe 3.0](https://github.com/DevExpress/testcafe/releases/tag/v3.0.0)
 ↳ Node.js tool to automated end-to-end testing.
- [AlaSQL 4.1](https://github.com/AlaSQL/alasql)
 ↳ JS SQL database for browser and Node.
- [Octokit.js 2.1](https://github.com/octokit/octokit.js)
 ↳ GitHub SDK for browsers, Node, and Deno.     

💻 Jobs  

[Find JavaScript Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-javascriptweekly%29&utm_content=find-your-next-job) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. 
Hired   

🧑‍💻 Got a job listing to share? _[Here's how](https://booking.cooperpress.com/jobs)_.          

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