What's new in Svelte: June 2022
source link: https://svelte.dev/blog/whats-new-in-svelte-june-2022
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
What's new in Svelte: June 2022
Cancellable dispatched events, deeper {@const} declarations and more!
Daniel 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!
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)
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
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:
To Hear
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
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!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK