What's new in Svelte: January 2024
SvelteKit 2 and a much-improved $state rune
Happy New Year! It's been a busy month for the Svelte maintainers - with tons of new features dropping in the Svelte 5 preview and the release of SvelteKit 2!
You can find all the new features in both projects below, along with a bunch of resources and sites built with Svelte in the Community Showcase.
Let's jump in...
What's new in SvelteKit (2.0 and more!)permalink
With its 2.0 release, SvelteKit is now more capable than ever. Be sure to check out the docs links in each update for more info on how to use each feature as well as the new Performance page - which explains how SvelteKit works to make your applications as performant as possible.
resolvePath
has been replaced byresolveRoute
in$app/paths
. Use it to populate a route ID with params to resolve a pathname (1.29.0, Docs, #11261)response.arrayBuffer()
will now be inlined during SSR (1.30.0, Docs, #10535)- SvelteKit 2.0.0 adds:
You can find a migration guide for SvelteKit 2.0 on the SvelteKit docs. Things should be pretty seamless with the svelte-migrate
command doing much (if not all) for you!
What's new in Sveltepermalink
With Svelte 5 in preview, Svelte 4 (@latest
) has only been getting bug fixes - with its current version at 4.2.8
. The updates below are from version 5's preview branch:
- The new
$inspect
rune is likeconsole.log
except that it will re-run whenever its argument changes (5.0.0-next.16, Docs, #9705) $state
is now proxied to make reactivity nested by default. This is a response to user feedback with plenty of context in the PR - so check it out if you're interested on how the syntax has improved during the preview (5.0.0-next.18, Docs/Examples, #9739)- Fallback values for bindings are disallowed in runes mode since they're confusing, and a source of bugginess and implementation complexity (5.0.0-next.19, #9784)
- Fallback props are now readonly (unless used with
bind:
). By extension, default values should also be readonly (5.0.0-next.19, #9789) - The new
unstate
function allows you to remove reactivity from objects and arrays created with$state
(5.0.0-next.19, Docs, #9776) - GamepadEventHandlers for window.addEventListener (
gamepadconnected
andgamepaddisconnected
) have been added (5.0.0-next.23, Docs, #9861) {@const}
can now be used inside snippet blocks (5.0.0-next.24, #9904)- The new
$state.frozen
rune lets you access a read-only version of$state
that cannot be mutated. This is useful if you want to work with data using immutable patterns rather than mutable patterns (5.0.0-next.27, Docs, #9851)
For all the release notes going forward, check out the CHANGELOG on main.
Community Showcasepermalink
Apps & Sites built with Svelte
- eCourse is a sleek and customizable website template designed for effortless self-hosting of your online course
- Typogram is a brand design tool with "a sprinkle of AI"
- calcium is a browser extension for devs with fuzzy-find on browser tabs, bookmarks, history and common developer docs
- hintable is an exciting word guessing game
- domian.io retrieves a list of the most likely misspellings for your domain, their availability, and an easy way to register them
- Story Scroller is a REPL showcasing how Svelte can be used to make a scrollable cards list
- The Atlas of Sustainable Development Goals 2023 presents interactive storytelling and data visualizations about the 17 Sustainable Development Goals.
- Lingotrack is a social platform for you as a language learner to track your progress and find engaging new media
- Lofi Flow lets you save your best-loved YouTube lofi live radios and videos in one spot
Learning Resources
Featuring Svelte Contributors and Ambassadors
- Svelte in dynamic e-commerce widgets with Jacob Stordahl and Slicing Svelte with Sam Littlefair and Prismic from Svelte Radio
- I already love SvelteKit v2 by Huntabyte
- 14 Awesome Real World Projects That Use Svelte by Joy of Code
- Building a SvelteKit Adapter for WinterJS with Willow and Kev
- Progressive Splash Screen by Quang Phan (Svelte Vietnam)
- This Week in Svelte:
- 2023 Dec 1 - Svelte 4.2.8, reusing searchParams, peerDependencies!
- 2023 Dec 8 - validating forms UX, suppress ESLint warnings, bound functions
- 2023 Dec 15 - SvelteKit 2.0
- 22 Dec 2023 - SvelteKit 2.0.6, handling peerDependencies, action params
- 29 Dec 2023
To Watch/Hear
- Let's Build A Dropbox clone With SvelteKit And Firebase 🔥, Tailwind css, Shad-cn svelte etc 😁 by Lawal Adebola
- "App-like" List → Detail View Transitions 🦸 with SvelteKit by Johnny Magrippis
- Learn SvelteKit · Build a Modern Landing Page w. SvelteKit & TailwindCSS by Smoljames
To Read
- Deploy a SvelteKit App to GitHub Pages by Captain Codeman
- A Practical Guide to Mocking Svelte Stores with Vitest by Ben Tilling
- Svelte 5 is good, but runes need improvement by Kyle Nazario
- Shader Park and 2D by Untested
Libraries, Tools & Components
- Routify, the popular routing library used in many Svelte apps, has its first Release Candidate for version 3
- Superforms v2 is out now - supporting all validation libraries
- SvelteKit-Design-Pattern is a template showcase Kreonovo's SvelteKit MVC Design patterns (more info in the Reddit post)
- Shadcn's Svelte VSCode extension helps you install and use Shadcn components directly without leaving your IDE
- SGSG is an alternative "full-stack application" template based on Svelte, Go, SQLite and gRPC
- mistral-kit is a prompt-to-code site using mistral-7b and ollama
- svelte-browser-import provides functions to import and render a Svelte App/Component (.svelte files) directly inside a browser without a build step.
- progressbar-svelte is a Svelte package for customizable progress bars
- MdCraft is an open-source web app that serves as an in-browser Markdown editor and previewer
That's it for this month! Feel free to let us know if we missed anything on Reddit or Discord.
Have a great year 🥳