svelte

title	description	author	authorURL
What's new in Svelte: December 2022	Rounding the corner to SvelteKit 1.0	Dani Sandoval	https://dreamindani.com

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 <head> 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)

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.

Apps & Sites built with Svelte

Appwrite's new console makes its secure backend server for web, mobile & Flutter developers available 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

Skeleton is a UI toolkit to build fast and reactive web interfaces using Svelte + Tailwind CSS
svelte-svg-spinners is a collection of SVG Spinners components
Svelte Floating UI enables floating UIs with actions - no wrapper components or component bindings required
at-html lets you use {@html } tags with slots in Svelte apps
html-svelte-parser is a HTML to Svelte parser that works on both the server (Node.js) and the client (browser)
svelte-switcher is a fully customisable, touch-friendly, accessible and tiny toggle component
sveltkit-hook-html-minifier is a hook that wrapps html-minifier
sveltekit-hook-redirect is a hook that makes redirects easy
sveltekit-video-meet is a video calling web app built with SvelteKit and SocketIO
svelte-colourpicker is a lightweight opinionated colour picker component for Svelte
Svelte-HeadlessUI is an unofficial implementation of Tailwind HeadlessUI for Svelte
svelte-lazyimage-cache is a Lazy Image component with IntersectionObserver and cache action
threlte v5.0 is a completely new developer experience that is faster, more powerful, and incredibly flexible

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

See ya next near 🎆