What's new in Svelte: June 2022
Cancellable dispatched events, deeper {@const} declarations and more!
With last month's Svelte Summit behind us, we're ready to apply everything we learned in this new month of June! Also new this month are some quality-of-life changes to createEventDispatcher
, @const
declarations and tons of progress toward SvelteKit 1.0.
Let's dive in!
What's new in Svelte
Custom events can now be cancelled in the
createEventDispatcher
function (3.48.0, Docs, PR)The
{@const}
tag can now be used in{#if}
blocks to conditionally define variables (3.48.0, Docs, PR)Lots of bug fixes across
<svelte:element>
, animations and various DOM elements. Check out the CHANGELOG for a deeper dive!
What's new in SvelteKit
Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever (Vite 3.0 Milestone)
config.kit.alias
lets you more easily declare a custom alias to replace values inimport
statements (Docs, PR)Pages marked for prerendering will now fail during SSR at runtime (PR)
Breaking Changes
Node 14 is no longer supported (PR)
Requests to
/favicon.ico
will no longer be suppressed and will instead be handled as a valid route (PR)AMP support has been moved to a separate
@sveltejs/amp
package (Docs, PR)Generated types are now written to
_types
directories - update your imports accordingly (PR)%svelte.head%
and%svelte.body%
are now%sveltekit.head%
and%sveltekit.body%
inapp.html
(Docs, PR)LoadInput
is nowLoadEvent
Dropped support for Wrangler 1 in favor of Wrangler 2 ([PR}(https://github.com/sveltejs/kit/pull/4887))
Community Showcase
Apps & Sites built with Svelte
Plantarium is a tool for the procedural generation of 3D plants.
SPATULA is a tool for building shading materials that are exportable as code material in any project that uses lamina and threejs
Waaard lets you create and send protected links with a variety of SSO providers
Magidoc is a fast and highly customizable GraphQL documentation generator
myMarkmap is a custom editor for Markmap, built with SvelteKit
PassShare is a way for you to share your passwords to your friends, securely and effortlessly
DashingOS is a tool (like Notion + CodeSandbox) to make it quick and easy to prototype and document your work all in one place
worker-kit-email helps you develop transactional emails quickly using regular SvelteKit routes
kaios-weather-svelte is a very familiar looking weather app for KaiOS
svelte-gantt is a lightweight and fast interactive gantt chart/resource booking component
Miru is a BitTorrent streaming software for cats
Looking for a great SvelteKit website to contribute to? Help build the Svelte Society site!
Learning Resources
To Read
Component party is a site that compares common patterns in different frameworks
Quick tip: style prop defaults by Geoff Rich
Building a Musical Instrument with the Web Audio API by Tania Rascia
Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices and Svelte-Cubed: Loading Your glTF Models by Alex Warnes
To Watch
From Svelte Society:
The Svelte Summit Spring 2022 stream recording has been updated with chapter markers to make it easy to watch again and again
The full recording of Svelte London, April 2022 is up! Check out the amazing talks from across the Svelte London community
Persian Svelte Society is making Persian-language videos about Svelte
Svelte Sirens has been talking monthly to creators and contributors across the Svelte Community:
Across the Web:
Building vite-plugin-svelte-inspector, What is Singleton? and What is Navigation? by lihautan
Auto Import Components In Svelte Kit - Weekly Svelte by LevelUpTuts
🧪 Test SvelteKit with TDD & VITEST 🧪 by Johnny Magrippis
Google Analytics With SvelteKit, Using WebSockets With SvelteKit, SvelteKit Authentication Using Cookies and Svelte Headless UI Component Library by Joy of Code
Named Layouts In Nested Routes in SvelteKit by The Svelte Junction
SvelteKit Shiki Syntax Highlighting: Markdown Codeblocks and Svelte Capsize Styling: Typography Tooling by Rodney Lab
To Hear
Svelte Radio has been putting out weekly episodes:
Svelte and the Future of Frontend Development (feat. Rich Harris) from The New Stack
Libraries, Tools & Components
vite-plugin-svelte-console-remover is a Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files during build so they don't leak into production
Svelte Headless Tables is an unopinionated and extensible data tables for Svelte
y-presence is a lightweight set of libraries to easily add presence (live cursors/avatars) to any web application (now with Svelte support!)
Svelcro is a component performance tracker for Svelte applications
Svelte-Splitpanes lets you create dynamic and predictable view panels to layout an application
svelte-miniplayer is a lightweight, fast, resizable and draggable miniplayer for media
svelte-keybinds is a minimalistic keybinding interface, with rebinding and saving
svelte-speech-recognition converts speech from the microphone to text and makes it available to your Svelte components
Special Feature: Svelte Stores There were lots of Svelte stores released this month from a number of authors...
svelte-mutable-store is a Svelte store for mutable values with the
immutable
compiler optionsvelte-damped-store is a derived writable store that can suspend updates while svelte-lens-store is a functional lens over Svelte stores
svelte-persistent-store is a writable svelte store that saves and loads data from
Window.localStorage
orWindow.sessionStorage
.
Did we miss anything? Join us on Reddit or Discord to add your voice.
Don't forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! Get your tickets now.
See y'all next month!