Just announced: Svelte Summit Spring will be taking place on April 30, 2022. The 5th Virtual Svelte Conference is looking for speakers and sponsors... so it's time to dust off those proposals!
Also, some long-requested features were added to SvelteKit this month... including page endpoints! This change in how the load
function works makes it easier to fetch data required for basic pages, redirect from POST responses and handle 404s and other errors.
More on that and other new features and fixes below!
What's new in SvelteKit
The docs are now searchable and multipage with type definitions and hoverable code examples - Check them out at kit.svelte.dev/docs
Page endpoints significantly decrease the boilerplate needed when loading a page (Issue, PR, Docs)
Application versioning and update detection support lets you determine what to do when a route fails to load after an app update (Issue, PR, Docs)
A new option in
npm init svelte@next
will now set up Playwright automatically for testing (PR)
Breaking Changes
The
target
option is no longer available. Instead, theinit
script hydrates itsparentNode
(#3674)App-level types now live in the
App
namespace which allows you to type global types likeStuff
orSession
(#3670)JSONString
is nowJSONValue
(#3683)createIndexFiles
has been removed — it is now controlled by thetrailingSlash
option (#3801)SvelteKit will no longer exclude root-relative external links from prerendering, which will cause 404s if these URLs are intended to be served by a separate app. Use a custom
prerender.onError
handler if you need to ignore them (#3826)
New in Language Tools
Accessing properties in markups has been improved in the Svelte language tools (105.12.0) - working around some known issues with autocomplete (#538 / #1302)
Community Showcase
Apps & Sites
SvelteStorm is specifically tailored to provide all of the essential tools a Svelte developer needs to build a Svelte application
Supachat is a real-time chat app using Svelte and Supabase
Radicle is a peer-to-peer stack for building software together
The Making Known is a narrated encounter with posters designed by the Nazi German government to communicate with the occupied nations of Belgium, France, and Luxembourg during the Second World War
Svelte Kanban is a simple Svelte Kanban made in pure CSS
fngrng is a typing trainer focussed on accuracy over speed
Generative grids is a neat little generative SVG grid in a Svelte REPL, with randomly generated color palettes and shapes
LifeHash is a method of hash visualization that creates beautiful, deterministic icons
TypedWebhook.tools is a webhook testing tool for checking payloads, with automatic type generation
Speedskating is an animation widget to show olympic speedskating runs. Built with Svelte, D3 and regl
Web tail is a web application to view lines from file on local system or on remote server
Want to work on a SvelteKit site with others? Contribute to the Svelte Society site!
Learning Resources
To Read
Svelte Components as Web Components by Matias Meno
Simple Svelte Routing with Reactive URLs by Bjorn Lu
Leveling Up my Sveltekit / Sanity.io Blog Content with Featured Videos and Syntax Highlighting by Ryan Boddy
How This Blog Makes the Most of GitHub by paullj
FullStack JWT Auth: Introducing SvelteKit by John Idogun
Svelte-Cubed: Adding Motion to 3D Scenes by Alex Warnes
How to use Svelte's style directive by Geoff Rich
SvelteKit and the "Client pattern" by Julian Laubstein
To Watch
ShadowPage Endpoints In Svelte Kit - Weekly Svelte by LevelUpTutsTesting For Beginners (Playlist) by Joy of Code
KitQL - The native SvelteKit library for GraphQL by Jean-Yves COUËT
Libraries, Tools & Components
gosvelte is a proof of concept to serve Svelte-generated pages on GoLang HTTP server with server data being sent as props to svelte components
svelte-ethers-store uses the ethers.js library as a collection of readable Svelte stores for Svelte, Sapper or SvelteKit
Fluid Grid is a CSS grid system for future web
stirstack is an opinionated framework that combines Svelte.js, TailwindCSS, InertiaJS and Ruby on Rails
OATHqr helps users create security credentials for use with 2FA/MFA and other OATH-enabled apps. Use it to generate scannable QR codes for one-time password authenticator apps such as Aegis or YubiKey
svelte-GridTiles is a drag and drop resizable tiles library built on a responsive grid
Miscellaneous Svelte Components is a collection of miscellaneous svelte components alex-knyaz often use in my projects
walk-and-graph-svelte-components is a CLI node script to walk svelte and js files, to draw a beautiful JPG of your dependencies aka "imports"
Felte is a simple to use form library for Svelte
svelte-use-tooltip is a Svelte action to display a tooltip persistent-svelte-store is a generic persistent writable store, built from scratch in TypeScript according to the Svelte store contract
What'd we miss? Join us on Reddit or Discord to continue the conversation.
See y'all next month!