|
| 1 | +--- |
| 2 | +title: "What's new in Svelte: March 2024" |
| 3 | +description: 'Nested CSS support and a much cleaner client-side API for Svelte 5' |
| 4 | +author: Dani Sandoval |
| 5 | +authorURL: https://dreamindani.com |
| 6 | +--- |
| 7 | + |
| 8 | +This month, the Svelte maintainers made a ton of progress on Svelte 5 and Rich Harris talked to Prismic about how the team is working on making the framework even better. |
| 9 | + |
| 10 | +Lots to showcase too... so let's dive in! |
| 11 | + |
| 12 | + |
| 13 | +## What's new in Svelte |
| 14 | + |
| 15 | +As you may already have heard, [Svelte 5 is in preview](https://svelte-5-preview.vercel.app/docs/introduction). In the meantime, Svelte 4 (`@latest`) has had [one bugfix](https://github.com/sveltejs/svelte/blob/svelte-4/packages/svelte/CHANGELOG.md). The Svelte 5 changelog has quite a few updates, though: |
| 16 | + |
| 17 | +- breaking: `$derived.call` is now `$derived.by` (**5.0.0-next.54**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#$derived-by), [#10445](https://github.com/sveltejs/svelte/pull/10445)) |
| 18 | +- Destructuring derived object properties will now keep fine-grain reactivity (**5.0.0-next.55**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#derived), [#10488](https://github.com/sveltejs/svelte/pull/10488)) |
| 19 | +- The new `hydrate` method makes hydration-related code treeshakeable (**5.0.0-next.56**, [Docs](https://svelte-5-preview.vercel.app/docs/functions#hydrate), [#10497](https://github.com/sveltejs/svelte/pull/10497)) |
| 20 | +- Nested CSS is now supported, along with better support for `:is(...)` and `:where(...)` (**5.0.0-next.57**, [#10490](https://github.com/sveltejs/svelte/pull/10490)) |
| 21 | +- breaking: The client-side API has been simplified by removing `createRoot`, adjusting the `mount`/`hydrate` APIs and introducing `unmount` (**5.0.0-next.58**, [Issue#9827](https://github.com/sveltejs/svelte/issues/9827), [#10516](https://github.com/sveltejs/svelte/pull/10497)) |
| 22 | + |
| 23 | +For all the bug fixes, chores and underlying work required to get Svelte 5 to release-ready, check out [the CHANGELOG on main](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md). |
| 24 | + |
| 25 | + |
| 26 | +## What's new in SvelteKit |
| 27 | + |
| 28 | +Mostly bug fixes, this month. Most notably is a fix to prevent stale values after navigation (**2.5.1**, [#11870](https://github.com/sveltejs/kit/pull/11870)). |
| 29 | + |
| 30 | +Adapters can also now use an `emulate` function to provide dev and preview functionality (**2.5.0**, [Docs](https://kit.svelte.dev/docs/writing-adapters), [#11730](https://github.com/sveltejs/kit/pull/11730)). This will allow for an improved experience developing for Cloudflare in the near future ([11732](https://github.com/sveltejs/kit/pull/11732)). |
| 31 | + |
| 32 | +For all the changes in SvelteKit, check out the [CHANGELOG](https://github.com/sveltejs/kit/blob/main/packages/kit/CHANGELOG.md). |
| 33 | + |
| 34 | + |
| 35 | +--- |
| 36 | + |
| 37 | +## Community Showcase |
| 38 | + |
| 39 | +**Apps & Sites built with Svelte** |
| 40 | + |
| 41 | +- [Wishgram](https://www.wishgram.xyz/) is a tool to generate handwritten wishing cards |
| 42 | +- [rfidify](https://github.com/jonathanjameswilliams26/rfidify) is a Raspberry PI RFID reader that plays things on Spotify |
| 43 | +- [listn.fyi](https://listn.fyi/) is a fun and easy way to share what music you're currently into |
| 44 | +- [Meowrite](https://www.meowrite.com/) is an AI writing tool for cover letters, essays and more |
| 45 | +- [Photo Multitool](https://www.photomultitool.com/) is a free set of online tools for manipulating photos |
| 46 | +- [sveltekit-weather-app](https://github.com/maxjerry0107/sveltekit-weather-app) is a gorgeous weather app made with SvelteKit |
| 47 | + |
| 48 | +**Learning Resources** |
| 49 | + |
| 50 | +_Featuring Svelte Contributors and Ambassadors_ |
| 51 | +- [How to make a great framework better? - Svelte 5 with Rich Harris](https://www.youtube.com/watch?v=z7n17ajJpCo) by Prismic |
| 52 | +- [Svelte 5 is a beast, but is it worth switching?](https://www.youtube.com/watch?v=KB6zkvYJqoE&lc=UgxFIaNKUG5as18CSzp4AaABAg) by Syntax.FM |
| 53 | +- This Week in Svelte: |
| 54 | + - |
| 55 | + |
| 56 | +_To Read/Watch_ |
| 57 | + |
| 58 | +- [Upgrading to Svelte 5](https://gitcontext.com/blog/svelte-5-upgrade) by Mike Stachowiak |
| 59 | +- [Building with GPT4 and Svelte](https://kvak.io/meoweler) by Lev Miseri |
| 60 | +- [Mini site for recommending songs using Svelte & Deno](https://blog.bryce.io/mini-site-for-recommending-songs-using-svelte-deno) by Bryce Dorn |
| 61 | +- [Effortlessly Sync Your SvelteKit Frontend with Backend Using OpenAPI: A Step-by-Step Guide to Generating SDKs](https://www.launchnow.pro/blog/sveltekit-openapi-sdk-generation) by Launchnow |
| 62 | +- [How to build an editable website in 15 minutes in 2024](https://www.svelteheadless.com/how-to-build-an-editable-website-in-15-minutes-in-2024) by Svelte Headless |
| 63 | +- [Local-First LiveView Svelte ToDo App](https://liveview-svelte-pwa.fly.dev/) by Tony Dang |
| 64 | + |
| 65 | + |
| 66 | +**Libraries, Tools & Components** |
| 67 | + |
| 68 | +- [PaneForge](https://github.com/svecosystem/paneforge) provides components that make it easy to create resizable panes in your Svelte apps |
| 69 | +- [Svelte UX](https://svelte-ux.techniq.dev/) and [LayerChart](https://www.layerchart.com/) now include theme support via semantic and state classes |
| 70 | +- [Huly Platform](https://github.com/hcengineering/platform) is a robust framework designed to accelerate the development of business applications, such as CRM systems |
| 71 | +- [svelte-marquee](https://github.com/selemondev/svelte-marquee) is a beautiful marquee component for Svelte |
| 72 | +- [Just Ship](https://github.com/ocluf/justship) is a SvelteKit auth boilerplate for Svelte 5 |
| 73 | +- [cells](https://github.com/okcontract/cells) is a functional & reactive library for Svelte |
| 74 | +- [Svelte Headless](https://github.com/webuildsociety/svelte-headless) is an example site showing how to create a simple blog site that plugs into a headless CMS |
| 75 | +- [Sugar.css](https://sugar-css.com/) is a semantic, accessible, lightweight CSS framework |
| 76 | +- [apple-svelte](https://github.com/Carza-104/apple-svelte) is a component library for Svelte based on Apple's Human Interface design language |
| 77 | +- [SvelteKit SSE](https://github.com/tncrazvan/sveltekit-sse) provides an easy way to produce and consume server sent events. |
| 78 | +- [Formsnap](https://github.com/huntabyte/formsnap), an accessible wrapper for sveltekit-superforms, got a major rewrite and has improved [its docs](https://formsnap.dev) |
| 79 | + |
| 80 | + |
| 81 | +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). |
| 82 | + |
| 83 | +Until next month 👋 |
0 commit comments