Skip to main content

What’s new in Svelte: January 2023

SvelteKit 1.0, tutorial, and type definitions for Svelte elements.

Dani Sandoval

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 tutorial 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 between vitePreprocess and svelte-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 now fail() and ValidationError is now ActionFailure (#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 and prerender 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

To Watch

To Read

Libraries, Tools & Components

Happy new year 🎆 Let us know if we missed anything on Reddit or Discord