What’s new in Svelte: September 2021

This month, Svelte was voted StackOverflow’s most loved web framework, Tan Li Hau talked to Svelte Radio about his Svelte-filled YouTube channel, and SvelteKit made even more progress towards its 1.0 release!

New in Svelte

• use:actions can now be used on <svelte:body> (3.42.0)
• HTMLElement, SVGElement (3.42.2) and BigInt (3.42.3) are now known globals
• There is less code in Svelte’s output thanks to the following improvements in 3.42.2:
  • Whitespace is now collapsed in class and style attributes
  • Hydrated components have been updated to only rely upon helpers for creating the types of elements present in the component
• Scaling is now accounted for in flip animations (3.42.2)
• All <option>s in a <select> are now deselected when the bound value doesn’t match any of them (3.42.2)

For a full list of features and bug fixes, check out the Svelte changelog.

SvelteKit Updates

Svelte maintainers are looking for help getting SvelteKit to 1.0. We’ve knocked out over 100 issues that were on the 1.0 milestone. There’s only a couple dozen left and we’d love a hand making that list a bit shorter!

If you’d like to help, please consider working on any of the 1.0 milestone issues.

The focus this past month was on continuing to iron out any kinks, with well over 100 PRs merged. A few new features went in as well...

• SvelteKit will now detect if a prerendered app is trying to access a query parameter and return an error instead of failing silently (#2104)
• adapter-node now lets you add the Kit middleware to your own server for use with other middleware. You can also add middleware in dev mode with more improvements to come in this area
• The new sequence helper lets you chain together multiple handle calls
• A new handleError hook gives you the option to send data to an error tracking service, or to customise the formatting before printing the error to the console.
• adapter-node can now listen on socket path (#2048)

To see all updates to SvelteKit, check out the SvelteKit changelog.

---

Community Showcase

Apps & Sites

• macos-web by @puruvjdev has been rebuilt with Svelte from the ground up. Check out all the details in this Twitter thread
• Brave Search is using Svelte
• exatorrent is a self-hostable, easy-to-use, lightweight and feature-rich torrent client written in Go and Svelte
• json2TsTypes is a simple tool which will convert your JSON to TypeScript Types/Interfaces
• Histogram.dev generates histograms for each feature in a CSV
• cybernetic.dev is a collection of data-centric UI experiments made while learning Svelte
• LunaNotes is a Chrome extension to help with taking YouTube video notes
• theia.games‘s built-in 3D environment editor lets you create a VR world with a menu built in Svelte
• Ferrum is a music library and player available for Mac, Windows or Linux
• Fluid Earth is an interactive WebGL application for visualizing Earth’s atmosphere and oceans

Looking for a Svelte project to work on? Interested in helping make Svelte’s presence on the web better? Check out the list of open issues if you’d like to contribute to the Svelte Society rewrite in SvelteKit.

Educational Content

• Tauri with Standard Svelte or SvelteKit walks through how to setup Svelte with Tauri, a new light-weight framework for developing cross-platform hybrid desktop applications
• Svelte - Web App Development Reimagined [An Intro to Svelte] is a great intro talk from the goto; conference
• LevelUpTuts - Even More 5 Things I Like More In Svelte Than React highlights Svelte’s approach to refs (don’t need them), meta tags and more
• State Management in Svelte Applications is a tutorial on how to use the Svelte state management store to manage state in Svelte applications
• Migrating from Sapper to SvelteKit is a review and retrospective of ShipBit’s migration from Sapper

Libraries, Tools & Components

• svelte-stripe-js is everything you need to add Stripe to your Svelte project. 100% SvelteKit compatible
• svelte-steps is a customizable step component written in Svelte
• simple-optics-module is an online open source optics tool for experimenting and teaching geometrical optics
• inlang is an internationalization (i18n) tool for SvelteKit apps
• Sveno is a component transpiler that transforms React components to Svelte components
• svelte-useactions is a fully typed library for passing actions to components
• Svelte-Element-Query is a 322b library/action for element queries
• svelte-meta-tags is a plug-in that makes managing SEO easier in Svelte projects
• svelte-domtree lets you visualize the DOM - similar to DOM tree in Chrome DevTools
• Diffx, a cross-framework state management library, just added Svelte support
• svelte-ionic-starter a project template for Svelte + Ionic + CapacitorJS apps with live reload and iOS/Android build targets
• demo-sveltekit-sanity is a starter kit for SvelteKit and Sanity, an open source React CMS

Check out the community site sveltesociety.dev for more templates, adders and adapters from across the Svelte ecosystem.

See you next month!

Want more updates? Join us on Reddit or Discord!