What's new in Svelte: July 2024
svelte/events, simpler elements and more optional options
This month, we got a bunch of new features in the Svelte 5 release candidate, Rich Harris explained to Prismic's CEO how Svelte optimizes for vibes and Geoff Rich shared even more about this philosophy at CascadiaJS 2024.
Let's jump in!
What's new in Sveltepermalink
Below, you'll find the highlights from the Svelte 5 release notes (now in Release Candidate):
- You can now declare props in runes mode more succinctly using
let props = $props()
(5.0.0-next.167, #12201) - The new
on
import fromsvelte/events
allows you to preserve the order in which event handlers are called in more situations (5.0.0-next.152, Docs, #11912) - The
Component
type now represents the new shape of Svelte components (5.0.0-next.143, #11775) <svelte:document>
has newactiveElement
andpointerLockElement
bindings (5.0.0-next.150, #11879)<svelte:element>
, CSS custom property wrappers and string normalization have all been simplified and made more performant (5.0.0-next.152, #11773, #11948, #11954, #11792, #11949)render
,mount
andhydrate
options are now actually optional if no properties are required (5.0.0-next.163, Docs, #12111)
What's new in SvelteKitpermalink
The node and Cloudflare adapters got a few upgrades this month:
- The
BODY_SIZE_LIMIT
environment variable adds unit suffixes support to the adapter-node - making it easier to write and comprehend large byte values (adapter-node@5.2.0, Docs, #11680) - Node servers can now listen to the
sveltekit:shutdown
event (replacing the more abruptexit
) that is emitted after the HTTP server has closed all connections (adapter-node@5.1.0, Docs, #12153) - The Cloudflare adapter will now only throw a
_routes.json
error when the file exists but there are no configured routes in svelte.config (adapter-cloudflare@4.5.0, #12360)
Community Showcasepermalink
Apps & Sites built with Svelte
- Shootmail is an email template and content creation tool
- wplatest automates your WordPress plugin updates across multiple websites
- Svelte-MiniApps is a collection of bite-sized, user-friendly tools built with SvelteKit
- Interior Render AI redesigns your interior with AI in seconds
Learning Resources
Featuring Svelte Contributors and Ambassadors
- Prismic 🧡 Svelte: Meetup with Rich Harris, creator of Svelte! by Prismic
- How Svelte and RSCs are Changing Web Development with Rich Harris, Creator of Svelte by This Dot Media
- Learn Why JavaScript Frameworks Love Signals By Implementing Them and The Svelte 5 Reactivity Guide For The Modern Developer and Crafting Magical Spells Using Svelte's Powerful Reactivity by Joy Of Code
- Practical Svelte 5 - Shopping Cart by Huntabyte
- CascadiaJS 2024: Optimize for vibes by Geoff Rich (Livestream of Geoff's talk starts at 1:08:30)
- This Week in Svelte - deep dives into the Svelte changelog and new learnings from the week:
- Svelte Society Vienna
- Svelte London — June 2024
- Svelte Dev Vlog — June 2024 with Rich Harris
To Read
- Lessons using sveltekit to build a dataviz platform by DNLBLN on Reddit
- Frontend Frameworks in 2024 for eCommerce by Crystallize
- Using Unplugin Icons in SvelteKit: A Step-by-Step Guide by Rishi Raj Jain
- Migrating Tronic247 from WordPress to SvelteKit and Methods to Load Data in Svelte and SvelteKit by tronic247
To Watch
- The Easiest Way to Build Web Apps and 13 Svelte Concepts you Need to Know by Awesome
- SvelteKit Form Validation with Zod by Ross Robino
- Bringing together Auth and Payments with AirBadge by Stripe Developers
- Svelte 4 vs. Svelte 5 – Runes and Snippets by SvelteRust
Libraries, Tools & Components
- svelte5-commenter is a component demonstration for the common comments section
- SSC (Speedy Svelte Compiler) is a super-fast Svelte compiler written in Rust
That's it for this month! Let us know if we missed anything on Reddit or Discord.
Until next month 👋