What's new in Svelte: January 2021

A Svelte-packed showcase to kick-off the new year!

Daniel Sandoval Fri Jan 01 2021

Happy new year from Svelte! In the last month we made progress on Sapper's upcoming release, fine-tuned our SvelteComponent typings, and have seen some amazing apps, sites, and libraries coming out in the showcase.

What's changed in Svelte?

A new minor release replaces the SvelteComponent class with a SvelteComponentTyped class. This renaming should help with backwards compatibility. We've updated last month's blog post to avoid any confusion with the name change.

If you're using SvelteComponent or the new SvelteComponentTyped in your project or library, let us know what you're using it for and we'll add it to the showcase!

What's going on in Sapper?

More quality of life features are landing in the upcoming release every day. 0.29.0 will include new TypeScript definitions, fixes to scroll tracking and prefetching behavior, and improvements to the runtime router to support encoded query parameters.

If you're upgrading from 0.28.x, check out the migration guide for steps on updating to Sapper 0.29.

Is SvelteKit ready yet?

To avoid too much churn during development, SvelteKit is still being worked on in a private repo. There will be an announcement on the Discord, blog and Twitter when it's ready for a larger group of users and contributors.

In the meantime, you can explore the current build by running npm init svelte@next from your command line.

As cautioned in What's the deal with SvelteKit?, there are no docs or support available yet... So use at your own risk / for your own enjoyment!

Community Showcase

Apps & Sites

• manitu.me is a background sound / pomodoro timer for focus and relaxation
• Answer Socrates helps you find trending questions on the internet so that you can write the most relevant blog post, tweet, or billboard
• multris is a multiplayer Tetris game. You can read about its development here
• weather-ab compares the archive of weather in different cities of the world. Indispensable for people thinking about migration
• Game Nibs is a platform for gamers to find and share concise bite-sized bits of gaming advice, tips, tricks, screenshots, builds, and much more
• Ora is an open source website tracking and limiting tool for Chrome and Firefox
• vscode-dms is a group direct messaging chat app for VSCode
• Zero.2 is a math-based challenge game where you try to get to zero as quickly as possible
• Octave Compass is a chord table and scale explorer for many popular musical scales
• Infinite Walking Bass Generator 2 is an online music player that generates a unique walking bass line
• ListenAddict is a site that notifies you whenever a person has a new talk/interview on podcast

Demos, Libraries & Components

• svelte-tiny-virtual-list speeds up long lists by only rendering visible items
• svelte-query is a collection of helpful hooks for managing, caching and syncing asynchronous and remote data
• svelte-previous is a svelte store to remember previous values - helpful for transitions or a quick undo stack
• Let's Build a Confetti Cannon explains how to build a particle system and integrate a Canvas based animation into a larger application
• svelte-micro is a one-component router
• svelte-standalone-router is a standalone router with an API based on standalone-router
• svelte-datepicker is a datepicker component with variations for time selection, date ranges and responsive themes
• svelte-slimscroll is a action for Svelte.js, which can transforms any div into a scrollable area with a nice scrollbar.
• Svelte Zoomable is a custom transition with a nice zoom effect

Have a component you'd like to share? Check out the Components page on the Svelte Society site. You can contribute by making a PR to this file.

Learning Resources

• Using Svelte to create a scroll video effect showcases how the bind command can be used to create a cool scroll video effect with very little code
• How to make a flappybird game in svelte and typescript is a video tutorial including docs and code for reference
• Accessible Svelte Transition walks through prefers-reduced-motion to make svelte transitions more accessible
• Svelte's module scripts explained is a great introduction to the module context, a common Sapper pattern
• Awesome Svelte is a curated list of Svelte resources
• .NET Core and Svelte explains how to get Svelte up and running with .NET Core
• A la découverte de Svelte JS is a svelte tutorial series in French!
• Svelte for React Developers explains Svelte's core concepts to folks who are used to React
• Building a Svelte Static Website with Smooth Page Transitions shows how to build a static website with Svelte and add smooth page transitions using Three.js and GSAP.
• Using Apollo Client in Sapper explains the "simplest" solutions to integrate the Apollo query client into Sapper
• Reactive web apps with Crystal + Svelte explores how to build full-stack, server-rendered Svelte apps with a Crystal backend

Related Projects

• Snowpack's v3 release candidate is out now in preparation for a January 6 release date. Check out the Getting Started with Svelte for more info on how to use Snowpack.
• Uppy, the open source file uploader, announced Svelte support in its new version 1.24

See you next month!

Want to add your work to the Showcase? Want to contribute to Svelte? Check out the Svelte Society, Reddit and Discord to get involved!