mirror of
https://github.com/sveltejs/svelte.git
synced 2024-11-28 07:52:41 +01:00
10 KiB
10 KiB
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 theresolve
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 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 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
- 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 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 🎆