This month, we felt a shift in the way SvelteKit handles page properties. The last holdout of the use-cases that required fallthrough routes, validating parameter properties, has been replaced by a more specific solution.
More on that, and what else is new in Svelte, as we dive in...
What's new in SvelteKit
Param matchers allow you to check if a url parameter matches before rendering a page - replacing the need for fallthrough routes for this purpose (Docs, #4334)
Explicit redirects can now be handled directly from endpoints (#4260)
svelte-kit sync
(#4182), TypeScript 4.6 (#4190) and Vite 2.9 were released - adding non-blocking dependency optimization and experimental CSS source maps in dev mode as well as a number of bug fixes contributed by the SvelteKit team (#4468)
New Config Options
outDir
fixes path issues in monorepos and other situations where the desired output directory is outside the project directory (Docs, #4176)endpointExtensions
prevents files other than .js and .ts files from being treated as endpoints, unless you specify endpointExtensions (Docs, #4197)prerender.default
lets you prerender every page without having to writeexport const prerender = true
in every page file (Docs, #4192)
Breaking Changes
Fallthrough routes have been removed. For migration tips, check out the PR (#4330)
tabindex="-1"
is only added to<body>
during navigation (#4140 and #4184)Adapters are now required to supply a
getClientAddress
function (#4289)InputProps
andOutputProps
can now be typed separately in generatedLoad
(#4305)The
\$
character is no longer allowed in dynamic parameters (#4334)svelte-kit package
has been marked as experimental so changes to it after Kit 1.0 will not be considered breaking (#4164)
New across the Svelte ecosystem
Svelte: Lots of new types for TypeScript and Svelte plugin users - including
style:
directives and Svelte Actions (3.46.4 and 3.46.5)Language Tools: Svelte project files are now importable/findable through references without having them imported in a TS file (105.13.0)
Language Tools: Region folding is now supported in html with
<!--#region-->
/<!--#endregion-->
(105.13.0)
Community Showcase
Apps & Sites built with Svelte
Launcher is an open-source app launcher powered by SvelteKit, Prisma, and Tailwind
Paaster is a secure by default end to end encrypted pastebin built with Svelte, Vite, Typescript, Python, Starlette, rclone & Docker.
Simple AF Video Converter is an Electron wrapper around ffmpeg.wasm to make converting videos between formats easier
Streamchaser seeks to simplify movie, series and documentary search through a centralized entertainment technology platform
Svelte Color Picker is a simple color picker made with Svelte
ConcertMash is a small website that interacts with the Spotify API and generates new playlists based on the upcoming concerts you're attending
Modulus is a Design+Code Think Tank conceived with the main mission to evolve design and technology
Multiply is an integrated PR and Social agency moving at the speed of culture
yia! is a Young Innovator Award competition in New Zealand
Write to Russia is a community email writing platform to communicate with public
.ru
email addressesMarkdown Playground is an online playground dedicated for your markdown experiments.
RatherMisty is a no frills weather app with weather data from Open-Meteo
Minecraft Profile Pic (MCPFP) is a site to generate Minecraft profile pictures with ease
WebGL Fluid Simulation is a configurable fluid simulation built with Svelte and WebGL
This @NobelPeaceOslo exhibition was built using printed graphics, projected motion graphics, particle animations and generative sound design
Itching to contribute to a modern SvelteKit website? Help build the Svelte Society site!
Learning Resources
To Attend
Svelte Summit: Spring will take place on April 30, 2022! Join us for the 5th virtual Svelte conference on YouTube and Discord 🍾
To Read
Svelte(Kit) TypeScript Showcase + general TypeScript tips by Hofer Ivan
Local constants in Svelte with the @const tag by Geoff Rich
Design Patterns for Building Reusable Svelte Components by Eric Liu
Svelte is better than React by Hamilton Greene
Making Visualizations Literally with Svelte and D3 by Connor Rothschild
Coordinating Multiple Elements with Svelte Deferred Transitions by Daniel Imfeld
Animate on scroll with Svelte Inview - Little Bits by Maciek Grzybek
Lazy-Loading Firebase with SvelteKit and HeadlessUI Components with Svelte by Captain Codeman
SvelteKit Accessibility Testing: Automated CI A11y Tests by Rodney Lab
Getting Started with KitQL and GraphCMS by Scott Spence
React ⇆ Svelte Cheatsheet lists the simularities and differences between the two libraries - by Joshua Nussbaum
To Watch
Svelte Extravaganza | Async by pngwn
6 Svelte Packages You Should Know and Basic React To Svelte Conversion by LevelUpTuts
Page/Shadow Endpoint in SvelteKit by WebJeda
Custom Svelte Store: Higher Order Store by lihautan
SvelteKit For Beginners (Playlist) by Joy of Code - follow along with the blog guide
Fullstack SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄 by Johnny Magrippis
Firebase Authentication in SvelteKit! Full Stack App by Ryan Boddy
Libraries, Tools & Components
SvelTable is a feature rich, data table component built with Svelte
svelte-cyberComp is a powerful, lightweight Svelte Components writen in Svelte and Typescript
Flowbite Svelte is an unofficial Flowbite component library for Svelte
Svelte-Tide-Project is a starter template for Svelte frontend apps with Rust Tide backend server
Fetch Inject implements a performance optimization technique for managing asynchronous JavaScript dependencies - now with Svelte support
svelte-utterances is a lightweight comments widget built on GitHub issues
Liquivelte allows you to create your Shopify theme with Svelte-like components
@storyblok/svelte is the Svelte SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience
@svelte-on-solana/wallet-adapter is a modular TypeScript wallet adapter and UI components for Solana/Anchor applications using SvelteJS as framework
svelte-lookat creates a div which makes all its children follow the mouse cursor or the user's face when using a mobile phone
Join us on Reddit or Discord to continue the conversation.
See y'all next month!