What's new in Svelte: June 2022

Cancellable dispatched events, deeper {@const} declarations and more!

Dani Sandoval Jun 1 2022

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!

• 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!

• 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 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 in import 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% in app.html (Docs, PR)
• LoadInput is now LoadEvent
• Dropped support for Wrangler 1 in favor of Wrangler 2 (PR)

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
• Working with reduced motion in Svelte by GHOST
• 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:
  • SvelteKit + Sanity.io: a match made in heaven on May 13
  • Slicing up your Svelte Sites with Prismic on May 20
  • Rendering your Svelte apps on Render on May 24
  • The story behind the (unofficial) Svelte newsletter on May 27

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:
  • The Adventures of Running a Svelte Meetup
  • The other Rich! Geoff! (feat. Geoff Rich)
  • Inspecting Svelte Code with Dominik G.
  • Stores Galore
• 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 option
• svelte-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 or Window.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!