What's new in Svelte: August 2024
Significant hydration improvements, customizable warnings, and a new API: createRawSnippet
The ramp up to the Svelte 5 release has led to a bunch of huge improvements to both performance and customizability. Also in this month's round-up: some minor SvelteKit updates and a return of the Svelte Dev Vlog.
Let's dive in!
What's new in Svelte
Below, you'll find the highlights from the Svelte 5 release notes (currently in Release Candidate):
Breaking: The names of the
svelte/reactivityhelpers have been updated to include aSvelteprefix (5.0.0-next.169, Docs #12248)Branch effects now have better DOM boundaries - reducing bugs in
{#each}blocks and during DOM manipulation (5.0.0-next.171 and 5.0.0-next.182, #12215, #12258, #12383)Single-pass hydration has reduced DOM size and significantly improved hydration speed (5.0.0-next.179, #12335, #12339)
Breaking: Transitions now play on mount by default (5.0.0-next.177, #12351)
CSS can now be included in the
<head>when thecss: 'injected'compiler option is enabled. This makes it trivial to include styles when rendering things like emails and OG cards, as well as massively simplifying toy setups where you can't be bothered to figure out how to get CSS from the compiler into your server-rendered HTML (5.0.0-next.180, Docs, #12374)Svelte will now warn in dev on
{@html ...}block hydration mismatches (5.0.0-next.182, #12396)The new
warningFiltercompiler option lets you disable certain warnings for the whole application without having to addsvelte-ignorecomments everywhere (5.0.0-next.186, #12296)The new
createRawSnippetAPI, allows low-level creation of programmatic snippets outside of Svelte templates (5.0.0-next.189, Docs, #12425)
What's new in SvelteKit and beyond
The HTML attributes
enctypeandformenctypeare now respected for forms withuse:enhance(plus, some other bug fixes in the CHANGELOG)The cloudflare, cloudflare-workers, netlify and vercel adapters have all been updated to copy
.eot,.otf, .ttf,.woff, and.woff2font files when bundling (CHANGELOGs)svelte-preprocess, the tool used in nearly every Svelte project, is now dependency free! The team has gradually reduced it from 44 dependencies in 5.0.0 down to zero in the latest release (Tweet)prerendered redirects will now be appended to the
_redirectsfile in the Cloudflare Pages adapter (adapter-cloudflare@4.7.0, #12199)
Community Showcase
Apps & Sites built with Svelte
The StackOverflow 2024 Developer Survey results site was built using Svelte. Even better, the results show that 73% of developers that used it want to keep working with Svelte (More info in this tweet)
azigy is a live, multiplayer quiz and trivia application
on-device-transcription is a ready-to-use, minimal app that converts any speech into text
Whispering is an open-source transcription application that provides global speech-to-text functionality
Frogment is an OpenAPI specification editor
SticAI Glance summarizes reddit post to actionable insights
Over Rice tracks the best halal carts around New York City
earbetter is an ear trainer and tools for playing and programming music and audio
Moonglow is a deep planetary simulation using GPGPU
opml-editor is an online OPML editor tailored for managing subscription lists more easily
Praxis is an AI-powered trading journal that analyzes your trades and uncovers patterns
Lokal lets you share your localhost with Public and https .local Address
formcrafts lets you create incredible forms like application forms, lead generation forms, surveys, payment forms, and more
Shootmail is a template-first mail platform with scheduling and analytics
Supersaw is Open Source Web Based Digital Audio Workstation (DAW)
Learning Resources
Featuring Svelte Contributors and Ambassadors
Svelte Dev Vlog (with Rich) — June 2024 on Svelte Society YouTube
Svelte Meets Vite: A Deep Dive with Matias Capeletto (patakdev) by Svelte Radio
Unleashing the Power of Claude Artifacts with Svelte and Sonnet 3.5 and Perfect AI development setup for any programming language with Sonnet 3.5 and Claude Projects by Stanislav Khromov
Local First from Scratch - How to make a web app with local data by Syntax.
This Week in Svelte:
To Read
From React To Svelte - Our Experience as a Dev Shop by gimp3695
Authentication in SvelteKit using SvelteKitAuth by Aakash Goplani
SvelteKit (Svelte 5) and Supabase by the spatula
Firebase signInWithRedirect, localhost, and SvelteKit, Dealing with Dialogs in Svelte and Build a Docker Container from a pnpm monorepo by Captain Codeman
Introducing Svelte 5 by Frontend Masters
To Watch
Introduction to Sveltekit (#1) Parahack's Let learn Sveltekit, image optimization in sveltekit and Deploy your sveltekit app to cloudflare pages by Lawal Adebola
How Svelte runes syntax is better than plain JavaScript with signals by webdevladder
Libraries, Tools & Components
Sveaflet is an open-source Map component library
Svelte Magic UI are componetns built using Tailwind CSS, Tweened, Spring and Svelte Motion
Figblocks is an open-source UI component library for building Figma plugins with Svelte
VS Code Supports Custom Tab Labels (a good reminder for folks who haven't sent it up yet)
Storybook did a prerelease of
@storybook/addon-svelte-csfwith support for Svelte v5. If you're using it, share your feedback on their RFC: storybookjs/addon-svelte-csf#191sveltekit-search-params released
v3.0.0with better typesoptimistikit got revamped to fully support runes in
v1.0.0while keeping the@legacytag if you still can't update from stores
That's it for this month! Let us know if we missed anything on Reddit or Discord.
Until next month 👋