What's new in Svelte: January 2023
SvelteKit 1.0, learn.svelte.dev, and type definitions for Svelte elements
It's been just two weeks since the release of SvelteKit 1.0! If you haven't yet, check out the livestream, new website and learn.svelte.dev to learn all the features of SvelteKit step-by-step.
Let's dive into the details...
What's new in SvelteKit
@sveltejs/kit
1.0 is out! All future releases will follow semver and changes will be listed as major/minor/patch in the CHANGELOG.Improved support for Storybook and Histoire (#7990). Work is ongoing to fully support those tools (storybook#20239).
vitePreprocess
is now the default preprocessor. Please see the docs for differences betweenvitePreprocess
andsvelte-preprocess
(#8036).
Breaking changes:
Unknown exports (except when starting with an underscore) are no longer allowed from
+(layout|page)(.server)?.js
and+server.js
files (#7878)__data.json
is now stripped from URL (#7979)sveltekit()
will now return a promise for an array of Vite plugins (#7994)A new
embedded
option, turned off by default, helps with link clicks when embedding SvelteKit (docs, #7969)Automatic fallback generation has been replaced with
builder.generateFallback(fallback)
(#8013)invalid()
is nowfail()
andValidationError
is nowActionFailure
(#8012)SvelteKit will now throw an error on invalid load response (#8003)
SvelteKit is now using Vite 4 and requires a Svelte
peerDependency
of^3.54.0
(#7543)Shells are now prerendered when
ssr
is false andprerender
is not false - ensure prerender is false when ssr is also false (#8131)Warnings and errors about removed/changed APIs have been removed (#8019)
What's new in Svelte
The
options.direction
argument can now be passed to custom transition functions (3.54.0, #3918)Variables can now be updated from a
@const
declared function (3.54.0, #7843)svelte/elements
has been added for Svelte/HTML type definitions (3.55.0, #7649)
What's new in Language Tools
The Svelte extension and language tools now have a few new minimum version requirements:
Node version is now 16
TypeScript version is now 4.9
Svelte version is now 3.55
The following features have also been released:
missing handler quick fix (#1731)
add Svelte anchor missing attribute code action (#1730)
better commit characters handling (#1742)
add
--preserveWatchOutput
option (#1715)enhance Quickfixes to include Svelte Stores (#1789)
only show SvelteKit files context menu in SvelteKit projects (#1771)
use the
satisfies
operator if possible (#1770)
For all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.
Community Showcase
Apps & Sites built with Svelte
Svelte Recipes 🧑🍳 provides code snippets for common data visualization problems
Everything Svelte is a new course teaching everything you need to know to build a modern web application
CSS Timeline is a Timeline of the history and evolution of CSS
GitBar is a system tray app for showing your pull requested reviews
Texture Lab generates instant textures for games from any text
Totems is a studio creating custom-made stands and supports
PeopletoNotion is a Chrome Extension that adds LinkedIn profiles to Notion in one click
DeckDev is a deck builder for Magic: The Gathering
Default Shortcuts is a tool for searching keyboard shortcuts across browsers.
Learning Resources
From Svelte Society
Svelte Society - London December 2022 featuring two talks by Antony and Rich, respectively. Rich's talk, "Mistakes were made" is a SvelteKit 1.0 retrospective.
SvelteKit with Netlify Edge Functions by Brittney Postma
Sirens Stream: Skeleton - A fully featured UI Toolkit with Chris Simmons and Brittney Postma
Sirens: SvelteKit for Enterprise - Lacey Pevey joins the Sirens to talk through using SvelteKit at the Enterprise level
Sirens: Form Actions - Kev joins the Sirens again to chat about Form actions in SvelteKit and create a new form for speaker submissions on SvelteSirens.dev
To Watch
SvelteKit is my mistress by Fireship
Sveltekit 1.0 in under 3 minutes by Gui Bibeau
What Svelte UI Library Should You Use? and The Best Icon Library For Svelte (Iconify) by Joy of Code
To Read
Rendering emails with Svelte by Gautier Ben Aïm
Now That React is Dead, What’s the Next Big Thing? by Somnath Singh
Sveltekit API endpoints by Jef Meijvis
Chart.js 4.0 has been released, with updated Svelte support
Creating A Custom Svelte Media Query Store by Rik Schennink
Libraries, Tools & Components
Konsta UI is a library of pixel perfect mobile UI components built with Tailwind CSS for React, Vue & Svelte
probablykasper/modal-svelte is a modal component for Svelte
deepcrayon/scrolltron is a news ticker overlay for OBS Studio
JetBrains WebStorm 2022.3 now has built-in support for Svelte
NextAuth.js is now available for SvelteKit
SvelteKit CAS authentication is a set of functions to ease usage of a CAS/SSO in SvelteKit
@macfja/sveltekit-session is an easy way to do session management for SvelteKit
@svelte-plugins/tooltips is a basic tooltip component written in Svelte
tRPC-SvelteKit provides end-to-end typesafe APIs for your SvelteKit applications
SvelteKit Tailwind Blog Starter is an easily configurable and customizable blog starter for SvelteKit + Tailwind CSS
Free Svelte Accelerators is a list of Svelte and Sveltekit open source code to jump start your project
Happy new year 🎆 Let us know if we missed anything on Reddit or Discord