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 a Component to the Svelte Society site by making a PR to this file.

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!