Skip to main content

"What's new in Svelte: April 2022"

"Goodbye fallthrough routes, hello param validators!"

Dani Sandoval

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 write export 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 and OutputProps can now be typed separately in generated Load (#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 addresses
  • Markdown 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

To Read

To Watch

Libraries, Tools & Components

  • SvelTable is a feature rich, data table component built with Svelte
  • svelte-cyberComp is a powerful, lightweight component library written 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!