This month, we got a bunch of new features in the Svelte 5 release candidate, Rich Harris explained to Prismic’s CEO (https://www.youtube.com/live/uWLTDUjNrhQ) how Svelte optimizes for vibes and Geoff Rich shared even more about this philosophy at CascadiaJS 2024 (https://cascadiajs.com/2024/talks/optimize-for-vibes-svelte-5-and-the-new-age-of-svelte).

Let’s jump in!

What’s new in Svelte (#What’s-new-in-Svelte)Below, you’ll find the highlights from the Svelte 5 release notes (now in Release Candidate (https://www.npmjs.com/package/svelte?activeTab=versions)):

• You can now declare props in runes mode more succinctly using let props = $props() (5.0.0-next.167, #12201 (https://github.com/sveltejs/svelte/pull/12201))

• The new on import from svelte/events allows you to preserve the order in which event handlers are called in more situations (5.0.0-next.152, Docs (https://svelte-5-preview.vercel.app/docs/imports#svelte-events), #11912 (https://github.com/sveltejs/svelte/pull/11912))

• The Component type now represents the new shape of Svelte components (5.0.0-next.143, #11775 (https://github.com/sveltejs/svelte/pull/11775))

• svelte:document has new activeElement and pointerLockElement bindings (5.0.0-next.150, #11879 (https://github.com/sveltejs/svelte/pull/11879))

• svelte:element, CSS custom property wrappers and string normalization have all been simplified and made more performant (5.0.0-next.152, #11773 (https://github.com/sveltejs/svelte/pull/11773), #11948 (https://github.com/sveltejs/svelte/pull/11948), #11954 (https://github.com/sveltejs/svelte/pull/11954), #11792 (https://github.com/sveltejs/svelte/pull/11792), #11949 (https://github.com/sveltejs/svelte/pull/11949))

• render, mount and hydrate options are now actually optional if no properties are required (5.0.0-next.163, Docs (https://svelte-5-preview.vercel.app/docs/imports#svelte), #12111 (https://github.com/sveltejs/svelte/pull/12111))

What’s new in SvelteKit (#What’s-new-in-SvelteKit)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 (/docs/kit/adapter-node#Environment-variables-BODY_SIZE_LIMIT), #11680 (https://github.com/sveltejs/kit/pull/11680))

• Node servers can now listen to the sveltekit:shutdown event (replacing the more abrupt exit) that is emitted after the HTTP server has closed all connections (adapter-node@5.1.0, Docs (/docs/kit/adapter-node#Graceful-shutdown), #12153 (https://github.com/sveltejs/kit/pull/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 (https://github.com/sveltejs/kit/pull/12360))

Community Showcase (#Community-Showcase)Apps & Sites built with Svelte (#Community-Showcase-Apps-Sites-built-with-Svelte)

• Shootmail (https://shootmail.app/) is an email template and content creation tool

• wplatest (https://wplatest.co/) automates your WordPress plugin updates across multiple websites

• Svelte-MiniApps (https://github.com/Michael-Obele/Svelte-MiniApps) is a collection of bite-sized, user-friendly tools built with SvelteKit

• Interior Render AI (https://www.interiorrenderai.com/) redesigns your interior with AI in seconds

Learning Resources (#Community-Showcase-Learning-Resources)Featuring Svelte Contributors and Ambassadors

• Prismic 🧡 Svelte: Meetup with Rich Harris, creator of Svelte! (https://www.youtube.com/live/uWLTDUjNrhQ) by Prismic

• How Svelte and RSCs are Changing Web Development with Rich Harris, Creator of Svelte (https://www.youtube.com/watch?v=QTJtR8IUsQM) by This Dot Media

• Learn Why JavaScript Frameworks Love Signals By Implementing Them (https://www.youtube.com/watch?app=desktop&v=1TSLEzNzGQM) and The Svelte 5 Reactivity Guide For The Modern Developer (https://www.youtube.com/watch?v=tErKyuUTzsM) and Crafting Magical Spells Using Svelte’s Powerful Reactivity (https://www.youtube.com/watch?v=HnNgkwHZIII) by Joy Of Code

• Practical Svelte 5 - Shopping Cart (https://www.youtube.com/watch?v=geAcAzheu_Y) by Huntabyte

• CascadiaJS 2024: Optimize for vibes (https://geoffrich.net/posts/cascadiajs-2024/) by Geoff Rich (Livestream of Geoff’s talk starts at 1:08:30 (https://www.youtube.com/live/o2VQXBI_yk8?si=Vv4FSZ367dC50Ii7&t=4110))

• This Week in Svelte - deep dives into the Svelte changelog and new learnings from the week:

• Ep. 66 (https://www.youtube.com/watch?v=yaAGazsz6Lc) - adapter-node, new SvelteKit docs, Debugging Event modifiers in Svelte 5

• 7 Jun (https://www.youtube.com/watch?v=5JNcz7mOfMI) - Validation libraries, $effect.active() usage

• 31 May (https://www.youtube.com/watch?v=edoYKNgUQQI) - Floating UI, StartStopNotifier

• Svelte Society Vienna

• Ermin Celikovic — Building Web Components using Svelte (https://www.youtube.com/watch?v=T4zwmtUW7Gw)

• Domenik Reitzner — Svelte 5 Runes explained for Vue devs (https://www.youtube.com/watch?v=4idUQlFV02I)

• Svelte London — June 2024 (https://www.youtube.com/watch?v=J5srLwhlBdw)

• Svelte Dev Vlog — June 2024 (https://www.youtube.com/watch?v=4TGwlWFoGvM) with Rich Harris

To Read

• Lessons using sveltekit to build a dataviz platform (https://www.reddit.com/r/sveltejs/comments/1dggvhh/lessons_using_sveltekit_to_build_a_dataviz/) by DNLBLN on Reddit

• Frontend Frameworks in 2024 for eCommerce (https://crystallize.com/blog/best-frontend-frameworks?utm_medium=social&utm_source=Discord) by Crystallize

• Using Unplugin Icons in SvelteKit: A Step-by-Step Guide (https://www.launchfa.st/blog/sveltekit-unplugin-icons) by Rishi Raj Jain

• Migrating Tronic247 from WordPress to SvelteKit (https://www.tronic247.com/migrating-tronic247-from-wordpress-to-sveltekit?_) and Methods to Load Data in Svelte and SvelteKit (https://www.tronic247.com/methods-to-load-data-in-svelte) by tronic247

To Watch

• The Easiest Way to Build Web Apps (https://www.youtube.com/watch?v=ZT0yQgUIZho) and 13 Svelte Concepts you Need to Know (https://www.youtube.com/watch?v=A-6MVm0yt20) by Awesome

• SvelteKit Form Validation with Zod (https://www.youtube.com/watch?v=11AbCRomRhs) by Ross Robino

• Bringing together Auth and Payments with AirBadge (https://www.youtube.com/watch?v=6w3v9QD2ae4) by Stripe Developers

• Svelte 4 vs. Svelte 5 – Runes and Snippets (https://www.youtube.com/watch?v=X37exLLQHwg) by SvelteRust

Libraries, Tools & Components (#Community-Showcase-Libraries-Tools-Components)

• svelte5-commenter (https://github.com/cardgraph22/svelte5-commenter) is a component demonstration for the common comments section

• SSC (https://github.com/ssc-project/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 (https://www.reddit.com/r/sveltejs/) or Discord (https://discord.gg/svelte).

Until next month 👋