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 use theVary
header, which allows one cached response for each variation of thex-sveltekit-invalidated
header, 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 theresolve
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 nowroute.id
(#7450)'load' has been renamed to 'enter' and 'unload' to 'leave' in the
beforeNavigate
andafterNavigate
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 onlyerror
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 namedbuilding
, andconfig.kit.prerender.enabled
has been removed (#7762)getStaticDirectory()
has been removed from the builder API (#7809)The
format
option has been removed fromgenerateManifest(...)
(#7820)data-sveltekit-prefetch
has been replaced with-preload-code
and-preload-data
,prefetch
is nowpreloadData
andprefetchRoutes
is nowpreloadCode
(#7776, #7776)SubmitFunction
has been moved from$app/forms
into@sveltejs/kit
(#7003)
New in Svelte
The css compiler options of
css: false
andcss: true
have been replaced with'external' | 'injected' | 'none'
settings to speed up compilation forssr
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
Catching up after Svelte Summit and 3D, WebGL and AI by Svelte Radio
To Watch
Domenik Reitzner - The easy way, an introduction to Sveltekit from Svelte Society Vienna
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
Introduction To 3D With Svelte (Threlte), How To Use Global Styles In SvelteKit and Progressive Form Enhancement With SvelteKit by Joy of Code
To Read
Building tic-tac-toe with Svelte by Geoff Rich
Speed up SvelteKit Pages With a Redis Cache by Captain Codeman
Understanding environment variables in SvelteKit, Form validation with SvelteKit and Zod and Build a SvelteKit application with Docker by Justin Ahinon
Why I failed to create the "Solid.js's store" for Svelte, and announcing svelte-store-tree v0.3.1 by YAMAMOTO Yuji
Create an offline-first and installable PWA with SvelteKit and workbox-precaching by Antonio Sarcevic
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 appshtml-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 🎆