Skip to main content

What's new in Svelte: July 2021

Keeping cool with fixes, TypeScript tooling and tonnes of new features

As the northern hemisphere heats up, Svelte has stayed cool with lots of performance and bug fixes, better TypeScript support, and lots of new components & tools from around the ecosystem. Let's take a peek 👀

New in SvelteKit

  • adapter-node now precompresses assets using gzip & brotli (#1693)
  • Support for TypeScript transpilation has been added to the svelte-kit package tooling (#1633)
  • Improved caching defaults in adapter-node (#1416)
  • Allow configuring Rollup output options (#1572)
  • Fixed usage of SSL with HMR (#1517)

Features & bug fixes from around svelte/*

  • Svelte 3.38.3 (released June 22) includes a bunch of performance and bug fixes - including hydration optimizations, this preservation in bubbled events, and more!
  • The latest language tools releases added support for prop renaming from outside of a component, PostCSS syntax grammar, and a .d.ts output target in svelte2tsx which can be used to create type definitions from Svelte files.
  • Also in language tools, some long-awaited experimental features for enhanced TypeScript support were added - including explicitly typing all possible component events or slots, and using generics. Have a look at the RFC for more details and leave feedback in this issue if you are using it.
  • svelte-scroller got some quality-of-life fixes in 2.0.7 - fixing an initial width bug and updating its index more conservatively

Coming soon to Svelte

  • Constants in markup (RFC): Adds a new {@const ...} tag that defines a local constant (PR)

Community Showcase

Apps & Sites

  • SvelteThemes is a curated list of Svelte themes and templates built using svelte, sveltekit, elderjs, routify etc.
  • Beatbump is an alternative frontend for YouTube Music created using Svelte/SvelteKit.
  • Sveltuir is an app help you memorize the guitar fretboard

Educational Content

Libraries, Tools & Components

  • svelte-pipeline provides custom JavaScript contexts and the Svelte Compiler as Svelte Stores, for REPLs, Editors, etc.
  • Sveltotron is an Electron-based app made to inspect your Svelte app
  • svelte-qr-reader-writer is a Svelte component that helps read and write data from QR codes
  • svelte-stack-router Aims to make Svelte apps feel more native by routing with Stacks
  • svelte-typed-context provides an interface which, when provided to getContext or setContext, allows for stricter types
  • svelte-modals is a simple, flexible, zero-dependency modal manager for Svelte

Want to contribute a component? Interested in helping make Svelte's presence on the web better? Submit a Component to the Svelte Society site by making a PR to this file or check out the list of open issues if you'd like to contribute to the Svelte Society rewrite in SvelteKit.

See you next month!

Want more updates? Join us on Reddit or Discord!