What's new in Svelte: March 2023
SvelteHack, post-1.0 SvelteKit improvements and a huge showcase
March is coming in hot with a number of essential features having been added to SvelteKit following its 1.0 launch. Check out last week's blog post for more details.
Svelte Society also launched SvelteHack last month with over $12,000 in prizes - calling all Svelte developers, new and old, to make something awesome before the April 17th deadline!
And, if you haven't heard already, there's going to be another Svelte Summit! Head over to SvelteSummit.com and sign up for the newsletter to get updates about the next event 📬
Now let's jump into this month's changes...
What's new in SvelteKit
$app/pathscan now be used without an app - making things like component testing with Vitest, using Storybook, etc. easier (1.4.0, #8838)
Adapters can now be configured at the route level (1.5.0, Docs, #8740)
The new snapshot mechanism preserves ephemeral DOM state even after navigation and page reloads (1.5.0,Docs, #8710)
OPTIONSare now available within the server method (1.6.0, Docs, #8731)
Richer error messages have been added for invalid exports (1.7.0, #9055)
Streaming promises are now available for server load functions (1.8.0, Docs, #8901)
A new configuration option,
preloadStrategy, helps tune preloading to avoid import 'waterfalls' on certain browsers (1.8.4, Docs, #9179)
paths.relativeoption can control interpretation of
paths.base(1.9.0, Docs, #9220)
What's new in Svelte and Language Tools
The REPL on
svelte.devnow supports the
The new Call Hierarchy feature lets you see where a function or a class is called and follow the call stack up (extensions-107.1.0, #1889)
declarationMapsupport has been added to the Svelte extension. Now "go to definition" on
.sveltefiles will navigate to the source code when a library has declaration maps (extensions-107.1.0, #1878)
TypeScript Inlay Hints support is now available via the Svelte Extension. Enable them with
*for all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.
Apps & Sites built with Svelte
win32.run is a version of Windows XP in the browser - with a File System, programs, XP-style File Picker and Saver dialogs, 3rd-party programs, and more
Svelte Radial Menu is a radial menu experiment - based on Rauno's radial menu
apod color search lets you search for astronomy picture of the day (APO) photos by color
SvHighlight is a code highlighter for SvelteKit and TailwindCSS with blur and focus blocks
Limey lets you create beautiful one-page websites in minutes
a/links is an extension for short, composable bookmarks
Sprint Cards is a design challenge generator
Plought is a tool to reduce noise in decision making
ArcOS-Frontend is a rewrite of the Arc operating system's frontend in Svelte
Poxi is powering the user-made web with a drag-and-drop, drawable website editor that's easy to collaborate in
demo-threlte-scroller-rocinante is a "scrolly telling" proof-of-concept that combines svelte-sequence with Threlte
Phonics + Stuff is a set of resources for learning & teaching phonics
Featuring Svelte Contributors and Ambassadors
Streaming, snapshots, and other new features since SvelteKit 1.0 by Geoff Rich (on the Svelte Blog)
View Transition Experiments with Svelte and Native Page Transitions in SvelteKit (updated for 2023) by Geoff Rich
Ron Au's story and how to be whimsical! by Svelte Radio
SvelteKit 1.0 with Rich Harris by PodRocket
Svelte Society Africa has formally launched!
SvelteKit overview with Simon and Dominik by Frontend RheinMain
To Watch or Hear
Delightful Web Development with SvelteKit is a workshop from This Dot Labs - taking place on April 13th.
Have More Control Over Layouts With Group Layouts In SvelteKit and Learn SvelteKit Hooks Through 6 Examples by Joy of Code
Svelte Kit Creating Popup Modals with Tailwind CSS and SvelteKit: Creating Dynamic Tables with Tailwind CSS by Abdul Rehman 2050
Svelte Language Server Example by VolarJS
How I Made My App 2.4x Faster Switching to Svelte by Erik Verduin
Smooth Page Transitions with SvelteKit and How to Build a Static SvelteKit Site by Phil Kruft
Blazing fast PWAs with SEO power using SvelteKit and Ionic by Tommertom
Svelte Stores Tutorial: Share Data Between Multiple Components by Vincent Widerberg
A Business Case for SvelteKit by Chris Ellis
How to set up a new Svelte project with SvelteKit by Igor Nowosad
How to type Events, Slots, and Props in Svelte by Raqueebuddin Aziz
Use TypeScript with SvelteKit and Supabase by Ross Robino
Invoking Svelte components from your Ember apps by Rajasegar Chandran
Add a sitemap to your server side rendered SvelteKit website and State in URL: the SvelteKit approach by Justin Ahinon
Display crypto data real-time in a chart using Sveltekit, Chart.js & coincap.io by Hessel
Libraries, Tools & Components
Looks like I hit Substack’s length limit for this email 😲 Head over to svelte.dev/blog to see all the other Libraries, Tools and Components from this month!
Thanks for reading! Don't forget to try your hand at the Svelte Hackathon!
Feel free to let us know if we missed anything on Reddit or Discord