|
| 1 | +--- |
| 2 | +title: "What's new in Svelte: April 2024" |
| 3 | +description: 'Svelte Summit Spring on April 27! Plus: Maps, Dates and Sets' |
| 4 | +author: Dani Sandoval |
| 5 | +authorURL: https://dreamindani.com |
| 6 | +--- |
| 7 | + |
| 8 | +Spring is just around the corner (for half the globe at least), which means [Svelte Summit Spring](https://www.sveltesummit.com/) is coming soon! The event will take place on April 27 and could feature you (yes you!). The call for proposals is happening now so submit a talk (or three!) at [this form](https://www.sveltesummit.com/2024/spring/submit). |
| 9 | + |
| 10 | +Also, this month, a ton of new features have been merged into Svelte 5 to make it the best version of Svelte yet. We'll get into them all below, so let's jump right in! |
| 11 | + |
| 12 | + |
| 13 | +## What's new in Svelte |
| 14 | + |
| 15 | +[Svelte 5 is in preview](https://svelte-5-preview.vercel.app/docs/introduction) and gets closer to release every day. Below, you'll find some highlights from its [changelog](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md): |
| 16 | + |
| 17 | +- state/derived/props can be explicitly exported from components again (**5.0.0-next.62**, [#10523](https://github.com/sveltejs/svelte/pull/10523)) |
| 18 | +- `bind:value` now allows for a dynamic `type` attribute - fixing issues with common input bindings (**5.0.0-next.66**, [#10608](https://github.com/sveltejs/svelte/pull/10608)) |
| 19 | +- A new reactive `Date` object simplifies time and date reactivity within Svelte (**5.0.0-next.67**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#state-frozen-reactive-map-set-and-date), [#10622](https://github.com/sveltejs/svelte/pull/10622)) |
| 20 | +- `SSR` HTML mismatch validation has been improved and provides clearer error messages (5.0.0-next.69, [#10658](https://github.com/sveltejs/svelte/pull/10658)) |
| 21 | +- **Breaking:** Slots inside templates with a `shadowrootmode` attribute are now preserved (**5.0.0-next.73**, [#10721](https://github.com/sveltejs/svelte/pull/10721)) |
| 22 | +- **Breaking:** The `$props()` no longer accepts a generic type argument. Instead, component authors should type their props like any other variable declaration (**5.0.0-next.76**, [#10694](https://github.com/sveltejs/svelte/pull/10694)) |
| 23 | +- A new reactive `Map` object acts just like a normal Map but it will keep reactivity for enumeration, and all its API methods (**5.0.0-next.79**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#state-frozen-reactive-map-set-and-date), [#10803](https://github.com/sveltejs/svelte/pull/10803)) |
| 24 | +- The webkitdirectory DOM boolean attribute is now supported (**5.0.0-next.81**, [#10847](https://github.com/sveltejs/svelte/pull/10847)) |
| 25 | +- Form resets are now taken into account for two way bindings (**5.0.0-next.82**, [Docs](https://svelte-5-preview.vercel.app/docs/breaking-changes#other-breaking-changes-bindings-now-react-to-form-resets), [#10617](https://github.com/sveltejs/svelte/pull/10617)) |
| 26 | + |
| 27 | + |
| 28 | +## What's new in SvelteKit |
| 29 | + |
| 30 | +Just bugfixes this month! For all the changes in kit, check out the [CHANGELOG](https://github.com/sveltejs/kit/blob/main/packages/kit/CHANGELOG.md). |
| 31 | + |
| 32 | + |
| 33 | +--- |
| 34 | + |
| 35 | +## Community Showcase |
| 36 | + |
| 37 | +**Apps & Sites built with Svelte** |
| 38 | + |
| 39 | +- [notepad](https://www.usenotepad.com/) is a workspace for freelancers. Providing time tracking, tasks, reports, invoices and contacts all in one tool. |
| 40 | +- [Tokenbase](https://github.com/mateoroldos/tokenbase) is a free tool for creating, managing and distributing Design Tokens. Easily create your Design Systems and export them to code in a few clicks. |
| 41 | +- [MelloOS](https://mellobacon.github.io/mello_os/) is a fake OS desktop in the style of Windows 95 |
| 42 | +- [PowerHound](https://powderhound.io/) is an app for tracking snow conditions across Colorado's ski resorts and backcountry |
| 43 | +- [ProductSurveys](https://productsurveys.io/) gathers user feedback directly inside your product |
| 44 | +- [WAIfinder](https://github.com/nestauk/dsp_waifinder) is an interactive map shows entities operating in the AI industry in the UK |
| 45 | +- [talkmedown](https://talkmedown.net/) is an emergency landing survival game using SvelteKit UI and Three.js graphics. |
| 46 | +- [Bird Flapping](https://github.com/zonetecde/bird-flapping) is that game with a flapping bird (not to be confused with FlappyBird) |
| 47 | +- [Minesweeper](https://codeberg.org/wires5210/minesweeper-funnymode) FUNNYMODE is minesweeper, but FUNNY |
| 48 | +- [Routickr](https://www.routickr.com/) is a habit-tracking app with Firefox and Chrome extensions |
| 49 | + |
| 50 | +**Learning Resources** |
| 51 | + |
| 52 | +_Featuring Svelte Contributors and Ambassadors_ |
| 53 | +- Svienna (Svelte Society Vienna): |
| 54 | + - [Domenik Reitzner - A brief history of prototyping](https://www.youtube.com/watch?v=auqkebVQYXE) |
| 55 | + - [Lukas Stracke - Building an Error and Performance Monitoring SDK for SvelteKit](https://www.youtube.com/watch?v=N8Hs-LVL_f8) |
| 56 | + - [Jean Yves Couët - Are you on the right route? ](https://www.youtube.com/watch?v=K8sKpMSCOiE) |
| 57 | + - [Lucas Martin - Using SvelteKit to Build An Interactive Portfolio](https://www.youtube.com/watch?v=wAttcVDP4Ec) |
| 58 | +- This Week in Svelte: |
| 59 | + - [22 Mar 2024](https://www.youtube.com/watch?v=QiAMLIyM894) |
| 60 | + - [8 Mar 2024](https://www.youtube.com/watch?v=_vQVkOa5K-s) |
| 61 | + |
| 62 | +_To Read/Watch_ |
| 63 | + |
| 64 | +- [How we built our 41kb SaaS Website](https://criticalmoments.io/blog/how_we_built_our_marketing_page) by Critical Moments |
| 65 | +- [Migrating a personal homepage to Svelte](https://jakeout.com/posts/2024-03-04-svelte) by Jake Ouelletee |
| 66 | + |
| 67 | + |
| 68 | +**Libraries, Tools & Components** |
| 69 | + |
| 70 | +- [Svisualize](https://svisualize.dev/) is a VS Code Extension that visualizes your components as you code |
| 71 | +- [Neel/UI](https://github.com/aidan-neel/neel-ui) is a shadcn-inspired set of customizable components that you can copy and paste into your SvelteKit apps |
| 72 | +- [BLICKCSS](https://blick.netlify.app/) is a small (~30kb) CSS library to build great websites and web apps quickly and easily |
| 73 | + |
| 74 | + |
| 75 | +That's it for this month! Feel free to let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte). |
| 76 | + |
| 77 | +Until next month 👋 |
0 commit comments