Skip to content

Commit ee26958

Browse files
docs: "What's new in Svelte" November newsletter (#672)
* first draft november * H3 baby! Co-authored-by: Rich Harris <[email protected]> * move svelte cli to sveltekit section * prettier --------- Co-authored-by: Rich Harris <[email protected]> Co-authored-by: Rich Harris <[email protected]>
1 parent 0591780 commit ee26958

File tree

1 file changed

+89
-0
lines changed

1 file changed

+89
-0
lines changed
Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: "What's new in Svelte: November 2024"
3+
description: 'New features in Svelte 5 and a ton of new community libraries'
4+
author: Dani Sandoval
5+
authorURL: https://dreamindani.com
6+
---
7+
8+
In case you missed the [announcement post](https://svelte.dev/blog/svelte-5-is-alive), the brand new [omnisite](https://svelte.dev/blog/the-omnisite) or the maintainers [shipping it LIVE during Svelte Summit](https://www.youtube.com/live/fAPFsRP-mbc?si=Atd1WNpoMddssSna&t=13084)... Svelte 5 is out!
9+
10+
Also announced at Svelte Summit was [SvelteHack 2024: A Svelte Hackathon (with not-so-svelte prizes)](https://hack.sveltesociety.dev/2024). The submission period ends January 9 and only projects started after October 18th are eligible. So get those `$`s ready and start hacking!
11+
12+
Since the release of Svelte 5, there's already been one minor version to introduce a couple of helpful features. We'll dive into those - along with a number of updates across the CLI, SvelteKit and more - in this month's roundup...
13+
14+
## What's new in Svelte
15+
16+
If you've only recently [migrated to Svelte 5](https://svelte.dev/docs/svelte/v5-migration-guide), check out the last few months of updates for all the features that have gone into this release. For this month, you'll see some marked `-next.XXX`. These changes were in the 5.0 release.
17+
18+
- Snippets can now be used to fill slots (**5.0.0-next.262**, [#13427](https://github.com/sveltejs/svelte/pull/13427))
19+
- `hidden until-found` and `beforematch` are now available on DOM elements (**5.0.0-next.266**, [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden#using_until-found), [#13612](https://github.com/sveltejs/svelte/pull/13612))
20+
- **Breaking:** State mutations are not allowed in logic block expressions (**5.0.0-next.269**, [#13625](https://github.com/sveltejs/svelte/pull/13625))
21+
- `getContext()` is now allowed within `$derived` runes (**5.1.0**, [Docs](https://svelte.dev/docs/svelte/derived), [#13830](https://github.com/sveltejs/svelte/pull/13830))
22+
23+
To see all the amazing work that has gone into making the Svelte compiler better - including everything that went into making migrations easier - check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md).
24+
25+
## What's new in SvelteKit, Svelte CLI and Language Tools
26+
27+
- `adapter-auto` now supports the Bun package manager (**3.3.1**, [#12854](https://github.com/sveltejs/kit/pull/12854))
28+
- The [Svelte CLI](https://svelte.dev/blog/sv-the-svelte-cli) now supports a number of add-ons for new and existing projects. You can find the entire list of add ons in [the CLI Repository](https://github.com/sveltejs/cli) or by running `npx sv create` from your command line.
29+
- The Svelte extension now provides a Svelte 5 component migration command (**extensions-109.1.0**)
30+
31+
---
32+
33+
## Community Showcase
34+
35+
### Apps & Sites built with Svelte
36+
37+
- [DocumentCloud](https://github.com/MuckRock/documentcloud-frontend/tree/sveltekit) is an all-in-one platform used by newsrooms around the world to manage primary source documents
38+
- [Chord](https://chord.fm/) is an app for recording podcasts and interviews in high quality
39+
- [Monokai.pro](https://monokai.pro/) uses Svelte 5 now (See the [Reddit Post](https://www.reddit.com/r/sveltejs/comments/1gd87ej/monokaipro_uses_svelte_5_now/) for more details)
40+
- [svelte audio visualizations](https://github.com/flo-bit/svelte-audio-visualizations) are useful for visualizing voice input and output
41+
- [avi12's](https://chromewebstore.google.com/detail/youtube-auto-hd-+-fps/fcphghnknhkimeagdglkljinmpbagone) [YouTube](https://chromewebstore.google.com/detail/youtube-time-manager/fpoooibdndpjcnoodfionoeakeojdjaj) [extensions](https://chromewebstore.google.com/detail/youtube-like-dislike-shor/fdkpkpelkkdkjhpacficichkfifijipc) are great examples of how Svelte can be used in Chrome extensions
42+
- [Multy](https://multy.me/) is a simple tool that allows you to create a list of URLs, and share it with a single link
43+
- [BlackJack](https://github.com/baterson/blackjack-svelte-5) is a card game built with Svelte 5, showcasing Svelte features for educational and demonstration purposes
44+
45+
### Learning Resources
46+
47+
_Featuring Svelte Contributors and Ambassadors_
48+
49+
- [Svelte Summit Fall 2024](https://www.youtube.com/watch?v=fAPFsRP-mbc&list=PL8bMgX1kyZTg28nrVEDoyRTQFWweUR6fn) was a blast! Keep an eye out on this playlist to see all the talks split up into individual videos
50+
- [Svelte 5 Basics - Complete Svelte 5 Course for Beginners](https://www.youtube.com/watch?v=8DQailPy3q8) by Syntax
51+
- [Reduce your SvelteKit & Svelte 5 bundle sizes with server load functions](https://www.youtube.com/watch?v=8Sy04DGbJV8) by Stanislav Khromov
52+
53+
_This Week in Svelte_
54+
55+
- [Ep. 79](https://www.youtube.com/watch?v=wlngWKmIShA) — Changelog, Global/shared state, Kampsy-ui
56+
- [Ep. 80](https://www.youtube.com/watch?v=SHBxjWtlv4A) — Changelog, formgator
57+
- [Ep. 81](https://www.youtube.com/watch?v=xnNARAcjl9w) — Changelog, Inertia.js
58+
- [Ep. 82](https://www.youtube.com/watch?v=CS2Nuwdwvi0) — Changelog, Migration guide
59+
60+
_To Read_
61+
62+
- [Speed of Svelte reactive bindings vs keyboard events](https://zellwk.com/blog/svelte-reactive-bindings-speed/) by Zell Liew
63+
- [SvelteKit + Passkeys](https://passlock.dev/blog/passkeys/sveltekit-passkeys) by Passlock
64+
- [Local-First Web Development with Replicache: Building smooth user experiences](https://shootmail.app/blog/local-first-web-development-with-replicache) by Shootmail
65+
- [10 game-changing tools that level up Svelte developers in 2025](https://dev.to/sebconejo/10-game-changing-tools-that-level-up-svelte-developers-in-2025-14g3) by Sébastien Conejo
66+
67+
_To Watch_
68+
69+
- [Svelte 5 Is Like React, But Better](https://www.youtube.com/watch?v=31CyquY8RNE) by Theo - t3․gg
70+
- [JavaScript framework reinvents itself… Did "runes" just ruin Svelte?](https://www.youtube.com/watch?v=aYyZUDFZTrM) by Fireship
71+
72+
### Libraries, Tools & Components
73+
74+
- [Svelte 5 testing example](https://github.com/PaoloTorregroza/weather-testing) is a good example project demonstrating how to test Svelte 5 applications with Vitest
75+
- [Origin UI - Svelte](https://originui-svelte.pages.dev/) is an extensive collection of copy-and-paste components for quickly building app UIs
76+
- [Cancellable](https://choco-ui.com/blocks/cancellable) is a building block adds three reactive attributes to button and anchor elements to create a more consistent user experience across browsers and platforms
77+
- [svelte-simple-router](https://github.com/dvcol/svelte-simple-router) is a client-side router made for Svelte 5
78+
- [svelte-openai-realtime-api](https://github.com/flo-bit/svelte-openai-realtime-api) is a Svelte component for using the OpenAI realtime api
79+
- [FlyonUI](https://github.com/themeselection/flyonui) is an open-source Tailwind CSS Components Library with semantic classes and powerful JS plugins
80+
- [Svelte-Next](https://svelte-next.codewithshin.com/) automates Svelte version updates
81+
- [SvelteKit Dynamic Component Load demo](https://github.com/khromov/sveltekit-dynamic-component-load-demo/#sveltekit-dynamic-component-load-demo) shows how you can dynamically load different Svelte components depending on what content your backend API delivers
82+
- [Tzezar's datagrid](https://github.com/tzezar/datagrid) is an easy to use, easy to customize, datagrid made in Svelte 5
83+
- [svelte-bundle](https://github.com/uhteddy/svelte-bundle) is a tool for bundling Svelte components into single HTML files (with SSR!)
84+
- [svelte-virtuallists](https://github.com/orefalo/svelte-virtuallists) keeps your tables and lists efficient and fast: only render the visible items, instead of displaying all your data in large lists
85+
- [Sveltick](https://www.npmjs.com/package/sveltick) is a lightweight traffic-tracking library for your Svelte apps
86+
87+
That's it for this huge month in Svelte! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
88+
89+
Until next time 👋

0 commit comments

Comments
 (0)