What's new in Svelte: May 2021
Working toward SvelteKit 1.0 and a showcase full of SvelteKit sites!
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-staticto 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)
fetchin SvelteKit code will now use the environment-provided implementation, whenever possible. If
fetchis unavailable, it will be polyfilled by adapters (PR, Docs)
New in Svelte & Language Tools
svelte-preprocessnow supports the "extends" field of the tsconfig.json (4.7.2)
styleattributes 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
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
- 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.
- 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
- 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!