What's new in Svelte: May 2021

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

Dani Sandoval May 1 2021

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

• How to use Vercel Analytics with SvelteKit teaches how to track Web Vitals across your users' devices
• Asp.NETCore + Svelte + Vite connects the three frameworks with SpaCliMiddleware (VS2019)
• Add CoffeeScript to Svelte is an experimental command to run to add CoffeeScript to your SvelteKit project or Vite-powered Svelte app
• Adds Supabase to Svelte is an experimental command to run to add Supabase to your SvelteKit project
• svelte-babylon lets you use BabylonJS like A-Frame through reactive Svelte Components

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

• Amazing macOS Dock animation in Svelte demonstrates how nice Svelte and popmotion look together
• Solving the Tower of Hanoi with recursive Svelte templates incorporates the <svelte:self> element into a common computer science problem
• DIY SvelteKit CDK adapter puts together SvelteKit and AWS CDK
• Fireship's Svelte in 100 Seconds is a quick and easy introduction to Svelte's core concepts
• Tech Downtime has been diving into SvelteKit in this playlist - from getting up and running to debugging.
• lihautan's latest video updates in the Svelte 101 and Svelte Store playlists cover slots, stores and context - and when to use which
• DavidParkerW has been exploring Svelte, Sapper and SvelteKit in some real-world scenarios, like displaying a blog post list from an API

See you next month!

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