You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md
+18-27Lines changed: 18 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,46 +5,42 @@ author: Dani Sandoval
5
5
authorURL: https://dreamindani.com
6
6
---
7
7
8
-
From new syntax to improved dev tooling, the Svelte team has been busy this month building new features in both Svelte and SvelteKit. And as we round the corner into the new year, there's even more to look forward to... like the *10th Svelte Summit*! [Join the Svelte community](https://www.sveltesummit.com/) online or in-person in Barcelona: May 8th and 9th.
8
+
From new syntax to improved dev tooling, the Svelte team has been busy this month building new features in both Svelte and SvelteKit. And as we round the corner into the new year, there's even more to look forward to... like the _10th Svelte Summit_! [Join the Svelte community](https://www.sveltesummit.com/) online or in-person in Barcelona: May 8th and 9th.
9
9
10
10
Now let's get to the news 👀
11
11
12
12
## What's new in Svelte
13
13
14
-
- Snippets can now be exported from module scripts (**5.5.0**, [Docs](https://svelte.dev/docs/svelte/snippet#Exporting-snippets), [#14315](https://github.com/sveltejs/svelte/pull/14315))
14
+
- Snippets can now be exported from module scripts (**5.5.0**, [Docs](/docs/svelte/snippet#Exporting-snippets), [#14315](https://github.com/sveltejs/svelte/pull/14315))
15
15
-`defaultValue` and `defaultChecked` are now supported for inputs (**5.6.0**, [Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/defaultChecked), [#14289](https://github.com/sveltejs/svelte/pull/14289))
16
-
- The loose parser mode creates a more modern AST for developer tools to consume (**5.13.0**, [Docs](https://svelte.dev/docs/svelte/svelte-compiler#parse), [#14691](https://github.com/sveltejs/svelte/pull/14691))
16
+
- The loose parser mode creates a more modern AST for developer tools to consume (**5.13.0**, [Docs](/docs/svelte/svelte-compiler#parse), [#14691](https://github.com/sveltejs/svelte/pull/14691))
17
17
- A new "worker" exports condition helps better support bundling for worker-based environments (**5.15.0**, [#14779](https://github.com/sveltejs/svelte/pull/14779))
18
18
19
-
20
19
_New/Updated Syntax_
21
20
22
-
-`<svelte:boundary>` is a new special element that can capture errors that occur from within its subtree during client rendering (**5.3.0**, [Docs](https://svelte.dev/docs/svelte/svelte-boundary), [#14211](https://github.com/sveltejs/svelte/pull/14211))
23
-
- #each is now supported without `as` (**5.4.0**, [Docs](https://svelte.dev/docs/svelte/each), [#14396](https://github.com/sveltejs/svelte/pull/14396))
24
-
- The new `Spring` and `Tween` classes in `svelte/motion` make it even easier to build custom animation (**5.8.0**, [Docs](https://svelte.dev/docs/svelte/svelte-motion), [#11519](https://github.com/sveltejs/svelte/pull/11519))
25
-
- The new `outro` option in `unmount` will play transitions before the component is removed from the DOM. (**5.13.0**, [Docs](https://svelte.dev/docs/svelte/svelte#unmount), [#14540](https://github.com/sveltejs/svelte/pull/14540))
26
-
- The `$inspect.trace` rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (**5.14.0**, [Docs](https://svelte.dev/docs/svelte/inspect#inspect.trace()), [#14290](https://github.com/sveltejs/svelte/pull/14290))
27
-
21
+
-`<svelte:boundary>` is a new special element that can capture errors that occur from within its subtree during client rendering (**5.3.0**, [Docs](/docs/svelte/svelte-boundary), [#14211](https://github.com/sveltejs/svelte/pull/14211))
22
+
- #each is now supported without `as` (**5.4.0**, [Docs](/docs/svelte/each), [#14396](https://github.com/sveltejs/svelte/pull/14396))
23
+
- The new `Spring` and `Tween` classes in `svelte/motion` make it even easier to build custom animation (**5.8.0**, [Docs](/docs/svelte/svelte-motion), [#11519](https://github.com/sveltejs/svelte/pull/11519))
24
+
- The new `outro` option in `unmount` will play transitions before the component is removed from the DOM. (**5.13.0**, [Docs](/docs/svelte/svelte#unmount), [#14540](https://github.com/sveltejs/svelte/pull/14540))
25
+
- The `$inspect.trace` rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (**5.14.0**, [Docs](</docs/svelte/inspect#inspect.trace()>), [#14290](https://github.com/sveltejs/svelte/pull/14290))
28
26
29
27
_Reactivity APIs_
30
28
31
-
-`createSubscriber` creates reactive values that depend on subscriptions (**5.7.0**, [Docs](https://svelte.dev/docs/svelte/svelte-reactivity#createSubscriber), [#14422](https://github.com/sveltejs/svelte/pull/14422))
32
-
- The reactive `MediaQuery` class creates a media query and provides a current property that reflects whether or not it matches (**5.7.0**, [Docs](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery), [#14422](https://github.com/sveltejs/svelte/pull/14422))
33
-
- Getters and setters can now be bound to with `bind` (**5.9.0**, [Docs](https://svelte.dev/docs/svelte/bind), [#14307](https://github.com/sveltejs/svelte/pull/14307))
34
-
- The `svelte/reactivity/window` module exports reactive versions of various `window` values, each of which has a reactive current property that you can reference in reactive contexts (**5.11.0**, [Docs](https://svelte.dev/docs/svelte/svelte-reactivity-window), [#14660](https://github.com/sveltejs/svelte/pull/14660))
35
-
29
+
-`createSubscriber` creates reactive values that depend on subscriptions (**5.7.0**, [Docs](/docs/svelte/svelte-reactivity#createSubscriber), [#14422](https://github.com/sveltejs/svelte/pull/14422))
30
+
- The reactive `MediaQuery` class creates a media query and provides a current property that reflects whether or not it matches (**5.7.0**, [Docs](/docs/svelte/svelte-reactivity#MediaQuery), [#14422](https://github.com/sveltejs/svelte/pull/14422))
31
+
- Getters and setters can now be bound to with `bind` (**5.9.0**, [Docs](/docs/svelte/bind), [#14307](https://github.com/sveltejs/svelte/pull/14307))
32
+
- The `svelte/reactivity/window` module exports reactive versions of various `window` values, each of which has a reactive current property that you can reference in reactive contexts (**5.11.0**, [Docs](/docs/svelte/svelte-reactivity-window), [#14660](https://github.com/sveltejs/svelte/pull/14660))
36
33
37
34
## What's new in SvelteKit, Svelte CLI and Language Tools
38
35
39
36
- Vite 6 is now supported in SvelteKit - `create` templates in the CLI have been updated to this version (**[email protected]**, **[email protected]**[Docs](https://vite.dev/blog/announcing-vite6), [#12270](https://github.com/sveltejs/kit/pull/12270))
40
-
- The new `init` hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (**2.10.0**, [Docs](https://svelte.dev/docs/kit/hooks#Shared-hooks-init), [#13103](https://github.com/sveltejs/kit/pull/13103))
37
+
- The new `init` hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (**2.10.0**, [Docs](/docs/kit/hooks#Shared-hooks-init), [#13103](https://github.com/sveltejs/kit/pull/13103))
41
38
- Custom Types are now transported across the server/client boundary (**2.11.0**, [#13149](https://github.com/sveltejs/kit/pull/13149))
42
-
- The new `$app/state` module replaces the existing `$app/stores` module but using Svelte 5 state. The `migrate` tool in the CLI/language tools have been updated to match (**2.12.0**, [Docs](https://svelte.dev/docs/kit/$app-state), [#13140](https://github.com/sveltejs/kit/pull/13140))
43
-
-`bundleStrategy` lets you choose between `'split'`, `'single'` and `'inline'` output options for JS and CSS files (**2.13.0** and **2.15.0**, [Docs](https://svelte.dev/docs/kit/configuration#output), [#13173](https://github.com/sveltejs/kit/pull/13191) and [#13193](https://github.com/sveltejs/kit/pull/13193))
44
-
- The new `sveltekit-adapter` add-on for the Svelte CLI (`sv`) installs and replaces existing SvelteKit adapters ([Docs](https://svelte.dev/docs/cli/sv-add), [#346](https://github.com/sveltejs/cli/pull/346))
39
+
- The new `$app/state` module replaces the existing `$app/stores` module but using Svelte 5 state. The `migrate` tool in the CLI/language tools have been updated to match (**2.12.0**, [Docs](/docs/kit/$app-state), [#13140](https://github.com/sveltejs/kit/pull/13140))
40
+
-`bundleStrategy` lets you choose between `'split'`, `'single'` and `'inline'` output options for JS and CSS files (**2.13.0** and **2.15.0**, [Docs](/docs/kit/configuration#output), [#13173](https://github.com/sveltejs/kit/pull/13191) and [#13193](https://github.com/sveltejs/kit/pull/13193))
41
+
- The new `sveltekit-adapter` add-on for the Svelte CLI (`sv`) installs and replaces existing SvelteKit adapters ([Docs](/docs/cli/sv-add), [#346](https://github.com/sveltejs/cli/pull/346))
45
42
- The language tools extensions will now make use of loose Svelte parser and provide better intellisense (**109.4.0**, [#2631](https://github.com/sveltejs/language-tools/pull/2631))
46
43
47
-
48
44
_Adapter Updates_
49
45
50
46
-`adapter-auto` has added support for the bun language server (**3.3.0**, [#12854](https://github.com/sveltejs/kit/pull/12854))
@@ -68,7 +64,6 @@ _Adapter Updates_
68
64
-[WickGPT](https://github.com/stormyzio/wickgpt) is an online tool to generate fake clips of chatGPT responses
69
65
-[other.supply](https://other.supply/) is a virtual vinyl shop that simulates the record-flipping experience
70
66
71
-
72
67
### Learning Resources
73
68
74
69
_Featuring Svelte Contributors and Ambassadors_
@@ -78,34 +73,30 @@ _Featuring Svelte Contributors and Ambassadors_
78
73
-[Perfect Svelte 5 code completion for any LLM - Claude, ChatGPT and GitHub Copilot](https://www.youtube.com/watch?v=tprMklFzy44) by Stanislav Khromov
79
74
-[Svelte 5 Is Here!](https://www.youtube.com/watch?v=t6-znHs8DDM) and [View Transitions Are More Powerful Than You Think](https://www.youtube.com/watch?v=jnYjIDKyKHw) by Syntax
-[Ep. 87](https://www.youtube.com/watch?v=TIaUCw4wKio) — GPU rendered components with svader
86
80
-[Ep. 88](https://www.youtube.com/watch?v=jFyMMu44t-s) — Live coding local storage
87
81
88
-
89
82
_To Read_
90
83
91
84
-[Building accessible sites with SvelteKit: seven practical tips](https://blog.datawrapper.de/sveltekit-accessibility-tips/) by Antonio Sarcevic
92
85
-[How to Fix Unexpected Logout Issues in SvelteKit Caused by data-sveltekit-preload-data](https://blog.yuki-dev.com/blogs/d2_e1zwgn3_o) by Yuki Ishii
93
86
94
-
95
87
_To Watch_
96
88
97
89
-[Build & Launch a Svelte Website in Just 15 Minutes!](https://www.youtube.com/watch?v=m9fsj5zXyDY) by NAD LABS
98
90
-[The Magic of Svelte](https://www.youtube.com/watch?v=AKZtk0suBTE) by Jürg Hunziker, Vendure Conf 2024
99
91
100
-
101
92
### Libraries, Tools & Components
102
93
103
94
-[This site](https://svelte-llm.khromov.se/) provides Svelte 5 and SvelteKit documentation in an LLM-friendly format
104
95
-[svelte-mainloop](https://github.com/retrotheft/svelte-mainloop) is awrapper for MainLoop.js that handles function registration and cleanup, and lets you join and leave the loop with a single component ([Reddit](https://www.reddit.com/r/sveltejs/comments/1hfto6y/sveltemainloop_the_easiest_way_to_add_a_loop_to/))
105
96
-[bsky-comments-svelte](https://github.com/nsarrazin/bsky-comments-svelte/) is a simple customizable component to add comments to your website using Bluesky
106
-
-[Svelte Mini Router](https://github.com/rodrigocfd/svelte-mini-router) is a declarative, minimal SPA router for Svelte 5, without SvelteKit
97
+
-[Svelte Mini Router](https://github.com/rodrigocfd/svelte-mini-router) is a declarative, minimal SPA router for Svelte 5, without SvelteKit
107
98
-[svelte-firebase-state](https://github.com/pierregoutheraud/svelte-firebase-state) simplifies Firebase integration in Svelte/Sveltekit applications by providing easy-to-use reactive state classes for managing Firestore and Realtime Database data
108
-
-[monoco-svelte](https://github.com/monokai/monoco-svelte) lets you create custom (squircle) corners and borders for Svelte components
99
+
-[monoco-svelte](https://github.com/monokai/monoco-svelte) lets you create custom (squircle) corners and borders for Svelte components
109
100
-[svelte-audio-waveform](https://github.com/Catsvilles/svelte-audio-waveform) transforms an array of peak data into beautifully rendered, customizable waveforms for music players, podcasts, audio editing tools, and more
110
101
111
102
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).
0 commit comments