Skip to main content

What’s new in Svelte: May 2021

Working toward SvelteKit 1.0 and a showcase full of SvelteKit sites!

Dani Sandoval

Last week, Svelte Summit blew us away with a mountain of content! Check out the full recording or an audio-only (p)review on Svelte Radio. Now let’s get into this month’s news...

New features in the Svelte Compiler

  • :global() is now supported as part of compound CSS selectors (3.38.0, Example)
  • CSS custom properties can now be passed to components for use cases such as theming (3.38.0, Docs coming soon)

New in SvelteKit

  • kit.svelte.dev has a fresh new look and the SvelteKit Demo Site got a fresh set of paint. Check it out by running npm init svelte@next
  • You can now use @sveltejs/adapter-static to create a single-page app or SPA by specifying a fallback page (PR, Docs)
  • Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis (PR)
  • Error messages thrown during pre-rendering are now much more informative and readable (PR, Docs)
  • Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation (PR, Docs)
  • fetch in SvelteKit code will now use the environment-provided implementation, whenever possible. If fetch is unavailable, it will be polyfilled by adapters (PR, Docs)

New in Svelte & Language Tools

  • svelte-preprocess now supports the “extends” field of the tsconfig.json (4.7.2)
  • HTML style attributes now have hover & auto-complete. Foreign namespaces and ESM configs are now supported in the Svelte language server & extensions
  • The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined

Community Showcase

Apps & Sites

  • gitpod.io recently rewrote its site with SvelteKit
  • highlight eel is a web-based editor to mark your favorite parts of any YouTube video to clip and share with anyone
  • The Far Star Mission is an interactive audiobook companion to the album, The Far Star by Apotheus
  • JavaScript quiz is a small quiz application that saves your answers locally
  • ExtensionPay lets developers accept secure payments in browser extensions with no backend server code.
  • mk48.io is a naval warship game made with SvelteKit
  • Frog Safety is a guide for African Dwarf Frogs and the API freshwater master kit
  • Stardew Valley Character Preview loads your character’s attributes from your Stardew Valley savefile and lets you play around with different outfits, colours, and accessories.

Demos, Libraries, Tools & Components

  • svelte-parallax is a spring-based parallax component for Svelte
  • @svelte-plugins/viewable is a simple rule-based approach to tracking element viewability.
  • Sveltekit-JUI is a kit of UI components to be used in conjunction with Svelte and Svelte Kit.
  • EZGesture makes it easy to add gestures functionality with simple native DOM events

Want to contribute your own component? Submit your own component to the list of packages on the Svelte Society site.

Starters

Looking for a starter or integration? Check out svelte-adders and a number of other template examples at the community site sveltesociety.dev

Learning Resources

See you next month!

Got something to add? Join us on Svelte Society, Reddit and Discord!