What's new in Svelte: January 2021
A Svelte-packed showcase to kick-off the new year!
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.
As always, you can find the official version of this newsletter on the Svelte blog 🥳
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!
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
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-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
Using Svelte to create a scroll video effect showcases how the
bindcommand 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-motionto 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
Uppy, the open source file uploader, announced Svelte support in its new version 1.24