Skip to main content

"What's new in Svelte: December 2022"

"Rounding the corner to SvelteKit 1.0"

Dani Sandoval

SvelteKit 1.0 is just around the corner! With 99% of the milestone issues completed, there's a lot of new changes from the last month to cover...

Let's get to it!

What's new in SvelteKit

  • Use the willUnload property to find out if the navigation will result the app being unloaded (full page reload/closing/leaving to another page). (#6813)
  • __data.json requests now allows for caching while ensuring we cache matching responses for all invalidation scenarios (#7532)
  • Linking to <a name="hash"> tags is now supported (#7596)
  • Throwing redirects in the handle hook is now supported (#7612)
  • A fallback component will now be added automatically for layouts without one (#7619)
  • The new preload function within the resolve hook determines what files should be added to the tag to preload it (Docs, #4963, #7704)
  • version is now available via $app/environment (#7689, #7694)
  • handleError can now return a promise (#7780)

Breaking changes:

  • routeId is now route.id (#7450)
  • 'load' has been renamed to 'enter' and 'unload' to 'leave' in the beforeNavigate and afterNavigate methods. beforeNavigate is now called once with type 'unload' on external navigation and will no longer run during redirects (#7502, #7529, #7588)
  • The redirect helper will now only allow status codes between 300-308 for redirects and only error status codes between 400-599 are allowed (#7767) (#7615, #7767)
  • Special characters will now be encoded with hex/unicode escape sequences in route directory names (#7644)
  • devalue is now used to (de)serialize action data - this is only a breaking change for everyone who fetches the actions directly and doesn't go through use:enhance (#7494)
  • trailingSlash is now a page option, rather than configuration (#7719)
  • The client-side router now ignores links outside %sveltekit.body% (#7766)
  • prerendering is now named building, and config.kit.prerender.enabled has been removed (#7762)
  • getStaticDirectory() has been removed from the builder API (#7809)
  • The format option has been removed from generateManifest(...) (#7820)
  • data-sveltekit-prefetch has been replaced with -preload-code and -preload-data, prefetch is now preloadData and prefetchRoutes is now preloadCode (#7776, #7776)
  • SubmitFunction has been moved from $app/forms into @sveltejs/kit (#7003)

New in Svelte

  • The css compiler options of css: false and css: true have been replaced with 'external' | 'injected' | 'none' settings to speed up compilation for ssr builds and improve clarity (3.53.0)

For all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.

Community Showcase

Apps & Sites built with Svelte

  • Appwrite's new console makes its secure backend server for web, mobile & Flutter developers avaiable in the browser
  • RepoMagic is a search and analytics tool for GitHub
  • Podman Desktop is a graphical tool for developing on containers and Kubernetes
  • Ballerine is a Know Your Customer (KYC) UX for any vertical or geography using modular building blocks, components, and 3rd party integrations
  • Budget Pen is a Codepen-like browser code editor with Tailwind included
  • doTogether helps you keep track of stuff you have get done via a List of recurring Tasks
  • Webscraped College Results is a collection of visualizations for data from r/collegeresults
  • Let's premortem helps avoid lengthy, frustrating post-mortems after a project fails
  • BLKMARKET.COM is an illustration library for commercial and personal use
  • Sigil is a canvas for anything with spaces organized by the most-voted content
  • corpus-activity-streams is an unofficial ActivityStreams 2.0 vocabulary data set and alternative docs
  • nodeMyAdmin is an alternative to phpMyAdmin written with SvelteKit
  • Image to Pattern Conversion is a cross-stitch pattern conversion tool with a list of pre-made patterns to start with
  • Verbums is an English vocabulary trainer to improve language comprehension
  • SVGPS removes the burden of working with a cluster of SVG files by converting your icons into a single JSON file
  • This 3D retro-themed asteroid shooter was made with threlte

Learning Resources

To Hear

To Watch

To Read

Libraries, Tools & Components

That's it for this month! Let us know if we missed anything on Reddit or Discord

See ya next near 🎆