|
| 1 | +--- |
| 2 | +title: "What's new in Svelte: July 2024" |
| 3 | +description: 'svelte/events, simpler elements and more optional options' |
| 4 | +author: Dani Sandoval |
| 5 | +authorURL: https://dreamindani.com |
| 6 | +--- |
| 7 | + |
| 8 | +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). |
| 9 | + |
| 10 | +Let's jump in! |
| 11 | + |
12 | +## What's new in Svelte |
| 13 | +Below, you'll find the highlights from the Svelte 5 release notes (now in [Release Candidate](https://www.npmjs.com/package/svelte?activeTab=versions)): |
| 14 | + |
| 15 | +- 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)) |
| 16 | +- 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)) |
| 17 | +- The `Component` type now represents the new shape of Svelte components (**5.0.0-next.143**, [#11775](https://github.com/sveltejs/svelte/pull/11775)) |
| 18 | +- `<svelte:document>` has new `activeElement` and `pointerLockElement` bindings (**5.0.0-next.150**, [#11879](https://github.com/sveltejs/svelte/pull/11879)) |
| 19 | +- `<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)) |
| 20 | +- `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)) |
| 21 | + |
| 22 | + |
| 23 | +## What's new in SvelteKit |
| 24 | +The node and Cloudflare adapters got a few upgrades this month: |
| 25 | + |
| 26 | +- 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](https://kit.svelte.dev/docs/adapter-node#environment-variables-bodysizelimit), [#11680](https://github.com/sveltejs/kit/pull/11680)) |
| 27 | +- 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](https://kit.svelte.dev/docs/adapter-node#graceful-shutdown), [#12153](https://github.com/sveltejs/kit/pull/12153)) |
| 28 | +- 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)) |
| 29 | + |
| 30 | +--- |
| 31 | + |
| 32 | +## Community Showcase |
| 33 | + |
| 34 | +**Apps & Sites built with Svelte** |
| 35 | + |
| 36 | +- [Shootmail](https://shootmail.app/) is an email template and content creation tool |
| 37 | +- [wplatest](https://wplatest.co/) automates your WordPress plugin updates across multiple websites |
| 38 | +- [Svelte-MiniApps](https://github.com/Michael-Obele/Svelte-MiniApps) is a collection of bite-sized, user-friendly tools built with SvelteKit |
| 39 | +- [Interior Render AI](https://www.interiorrenderai.com/) redesigns your interior with AI in seconds |
| 40 | + |
| 41 | + |
| 42 | +**Learning Resources** |
| 43 | + |
| 44 | +_Featuring Svelte Contributors and Ambassadors_ |
| 45 | +- [Prismic 🧡 Svelte: Meetup with Rich Harris, creator of Svelte!](https://www.youtube.com/live/uWLTDUjNrhQ) by Prismic |
| 46 | +- [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 |
| 47 | +- [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 |
| 48 | +- [Practical Svelte 5 - Shopping Cart](https://www.youtube.com/watch?v=geAcAzheu_Y) by Huntabyte |
| 49 | +- [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)) |
| 50 | +- This Week in Svelte - deep dives into the Svelte changelog and new learnings from the week: |
| 51 | + - [Ep. 66](https://www.youtube.com/watch?v=yaAGazsz6Lc) - adapter-node, new SvelteKit docs, Debugging Event modifiers in Svelte 5 |
| 52 | + - [7 Jun](https://www.youtube.com/watch?v=5JNcz7mOfMI) - Validation libraries, $effect.active() usage |
| 53 | + - [31 May](https://www.youtube.com/watch?v=edoYKNgUQQI) - Floating UI, StartStopNotifier |
| 54 | +- Svelte Society Vienna |
| 55 | + - [Ermin Celikovic — Building Web Components using Svelte](https://www.youtube.com/watch?v=T4zwmtUW7Gw) |
| 56 | + - [Domenik Reitzner — Svelte 5 Runes explained for Vue devs](https://www.youtube.com/watch?v=4idUQlFV02I) |
| 57 | +- [Svelte London — June 2024](https://www.youtube.com/watch?v=J5srLwhlBdw) |
| 58 | +- [Svelte Dev Vlog — June 2024](https://www.youtube.com/watch?v=4TGwlWFoGvM) with Rich Harris |
| 59 | + |
| 60 | + |
| 61 | +_To Read_ |
| 62 | + |
| 63 | +- [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 |
| 64 | +- [Frontend Frameworks in 2024 for eCommerce](https://crystallize.com/blog/best-frontend-frameworks?utm_medium=social&utm_source=Discord) by Crystallize |
| 65 | +- [Using Unplugin Icons in SvelteKit: A Step-by-Step Guide](https://www.launchfa.st/blog/sveltekit-unplugin-icons) by Rishi Raj Jain |
| 66 | +- [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 |
| 67 | + |
| 68 | + |
| 69 | +_To Watch_ |
| 70 | + |
| 71 | +- [The Easiest Way to Build Web Apps]<
8D12
/span>(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 |
| 72 | +- [SvelteKit Form Validation with Zod](https://www.youtube.com/watch?v=11AbCRomRhs) by Ross Robino |
| 73 | +- [Bringing together Auth and Payments with AirBadge](https://www.youtube.com/watch?v=6w3v9QD2ae4) by Stripe Developers |
| 74 | +- [Svelte 4 vs. Svelte 5 – Runes and Snippets](https://www.youtube.com/watch?v=X37exLLQHwg) by SvelteRust |
| 75 | + |
| 76 | + |
| 77 | + |
| 78 | +**Libraries, Tools & Components** |
| 79 | + |
| 80 | +- [svelte5-commenter](https://github.com/cardgraph22/svelte5-commenter) is a component demonstration for the common comments section |
| 81 | +- [SSC](https://github.com/ssc-project/ssc) (Speedy Svelte Compiler) is a super-fast Svelte compiler written in Rust |
| 82 | + |
| 83 | + |
| 84 | +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). |
| 85 | + |
| 86 | +Until next month 👋 |
0 commit comments