What's new in Svelte: February 2022
Rapid-fire releases across Svelte, SvelteKit and the community
Happy February, everyone! Over the last month or so, we've seen Svelte and SvelteKit develop at rapid speed, new community rules across the Reddit, GitHub and Discord, and quite a few amazing apps, tutorials and libraries.
Let's take a look...
Highlights from the Svelte changelog
3.45.0 brought a new a11y warning
a11y-no-redundant-roles
, destructuring and caching fixes3.46.0 added the much requested
{@const}
tag andstyle:
directiveCheck out 3.46.1 - 3.46.3 for fixes to the
{@const}
tag andstyle:
directive, along with a number of fixes to animations
What's new in SvelteKit
inlineStyleThreshold
allows you to specify where inline stylesheets are inserted into the page (Docs, #2620)beforeNavigate
/afterNavigate
lifecycle functions lets you add functionality before or after a page navigation (Docs, #3293)Platform context can now be passed from adapters (Docs, #3429)
Hooks now have an
ssr
parameter inresolve
to make it easier to skip SSR, when needed ([Docs](https://kit.svelte.dev/docs#hooks-handle, #2804)$page.stuff
provides a mechanism for pages to pass data 'upward' to layouts (Docs, #3252)Fallthrough routes let you specify where to route when an route can't be loaded (Docs, #3217)
New configs
Content Security Policy (CSP) is now supported for increased security when using inline javascript or stylesheets (Docs, #3499)
kit.routes
config allows you to customise public/private modules during build (Docs, #3576)prerender.createIndexFiles
config lets you prerender index.html files as their subfolder's name (Docs, #2632)HTTP methods can now be overridden using
kit.methodOverride
(Docs, #2989)
Config changes
Breaking change
use
Request
andResponse
objects in endpoints and hooks (#3384)
Community Showcase
Apps & Sites
timb(re) is a live music programming environment
Music for Programming is a series of mixes intended for listening while
${task}
to focus the brain and inspire the mindTeam Tale allows two authors to write the same story in a tag-team sort of fashion
Puzzlez is an online place to play Sudoku and Wordle
Closed Caption Creator makes it easy to add subtitles to your video on Windows, Mac and Google Chrome
SC3Lab is a code generator for experimenting with svelte-cubed and three.js
Donkeytype is a minimalistic and lightweight typingtest inspired by Monkeytype.
Above is a visual routine timer built for the ADHD/autistic mind
base.report is a modern research platform for serious investors
String turns your Phone into a secure portable audio recorder, making it easy to capture and share personal notes, family moments, classroom lectures, and more
The Raytracer Challenge REPL provides a live editor interface to configure a raytraced scene and render it live in any modern browser
awesome-svelte-kit is a list of awesome examples of SvelteKit in the wild
Map Projection Explorer lets you explore different map projections and explains their differences
Rubiks is a Rubik's Cube simulator
Pianisto is a working piano made with SVG, ToneJS and a lot of patience
Want to work on a SvelteKit site with others, try contributing to the Svelte Society site!
Learning and Listening
To Read
Accelerating Svelte's Development by Ben McCann
Let's learn SvelteKit by building a static Markdown blog from scratch by Josh Collinsworth
Building an iOS app with Svelte, Capacitor and Firebase by Harry Herskowitz
Mutating Query Params in SvelteKit Without Page Reloads or Navigations and Workaround for Bubbling Custom Events in Svelte by Mohamad Harith
How to build a full stack serverless application with Svelte and GraphQL by Shadid Haque
Creating a dApp with SvelteKit by Anthony Riley
Comparing Svelte Reactivity Options by Steve Lee
To Watch
Integrating Storybook with SvelteKit and Integrating FaunaDB with Svelte by the Svelte Sirens
SvelteKit Crash Course Tutorial by The Net Ninja
Svelte for Beginners by Joy of Code
SvelteKit $app/stores by lihautan
Sveltekit - Get All Routes/Pages by WebJeda
To Listen To
New Year, New Svelte!? from Svelte Radio
So much Sveltey goodness (featuring Rich Harris) from JS Party
The Other Side of Tech: A Documentarian Perspective (with Stefan Kingham) from Purrfect.dev
Libraries, Tools & Components
threlte is a three.js component library for Svelte
svelte-formify is a library to manage and validate forms that uses decorators to define validations
gQuery is a GraphQL Fetcher & Cache for Svelte Kit
Unlock-protocol is an integration to help login with MetaMask, Firebase, and paywall customers
AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS
Vitebook is a fast and lightweight alternative to Storybook that's powered by Vite
SwyxKit is an opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for 2022!
svelte-themes is an abstraction for themes in your SvelteKit app
svelte-transition is a Svelte component to make using CSS class based transitions easier - ideally suited for use with TailwindCSS
Svelte Inview is a Svelte action that monitors an element enters or leaves the viewport/parent element
svelte-inline-compile is a babel transform that allows for a much more pleasant experience when testing svelte components using Jest and
@testing-library/svelte
@feltcoop/svelte-mutable-store is a Svelte store for mutable values with an
immutable
compiler optionheadless-svelte-ui is a group of headless components that can be used in building Svelte Apps.
Did we miss something? Need help bringing your next idea to life in Svelte? Join us on Reddit or Discord.
See ya next month!