What’s new in Svelte: September 2024

A bunch of updates to Svelte dropped in the last few weeks, plus a few quality of life improvements in the Svelte language tools.

Let’s take a look...

What’s new in Svelte and Language Tools

• $state.frozen has been replaced with $state.raw (5.0.0-next.218, Docs, #12808)
• $state.is has been removed. RIP, little guy (#12916)
• svelte:options now lets you set the css: "inject" compiler option on a per-component basis (5.0.0-next.209, #12660)
• <svelte:component> is now unnecessary in runes mode and therefore is deprecated (5.0.0-next.203/217, #12646 and #12694)
• :global is now allowed in more places - making it easier to use in <style> tags and fixing issues with Tailwind’s @apply (5.0.0-next.199, Docs, #12560)
• Svelte’s typescript definition generator that comes with @sveltejs/package will now warn when its diagnostics detect that a d.ts file was not generated ([email protected], #2428)
• You can now specify a tsconfig in emitDts - helpful when working in a monorepo ([email protected], #2454)

Not covered in this list are a ton of efficiency and performance improvements across css and javascript compilation. If you’re interested, check out the CHANGELOG for more on how destructuring, state proxies and actions/styles/classes have all improved since last month.

---

Community Showcase

Apps & Sites built with Svelte

• Apple Podcasts for the web now uses Svelte
• UCLA Student Affairs has created their website with SvelteKit
• tidytube is a browser extension to declutter Youtube’s UI
• Graphite is an open source 2D procedural graphics editor
• My Yogi is a yoga sequence builder and manager
• Mark Of Destiny is a multiplayer online strategy game where you are the ruler of a small developing kingdom
• Dungeons and Jacks is a game mixing blackjack and roguelite elements
• YT Desk is a standalone player for YouTube and Youtube Music with a miniplayer, Discord “Rich Presence” and global shortcuts
• Synapsis is an AI-based learning platform
• SvelteCareers is a new Svelte job site that posts job alerts every Monday

Learning Resources

Featuring Svelte Contributors and Ambassadors

• React VS Svelte - Which one should you choose in 2024?, Svelte 5 Runes - How to talk to the compiler and Creating your JavaScript framework? by Prismic (featuring Rich Harris)
• Local First with Replicache - How to Build a Full Stack App with Data Syncing Part 1 by Syntax
• Avoid Using Effects To Derive Values In Svelte and Understanding Effects In Svelte And When To Use Them by Joy of Code
• Svelte Dev Vlog (with Simon) — July 2024
• Svelte London - August: Svelte’s Boundary Areas and Prototyping Tools (in Svelte!)
• This Week in Svelte:
  • Ep. 71 — Listening to object updates using $effect, IntelliJ, Icons
  • Ep. 72 — Changelog, using AI with Svelte 4 and 5, Icon components
  • Ep. 73 — Changelog, OptimistiKit, database options

To Read

• Svelte 5 signals fix its glitchy and inconsistent reactivity by webdevladder
• Why Svelte is a game changer for IIoT development by Peter Repukat
• Local First with Cloud Sync using Firestore and Svelte 5 Runes by Captain Codeman
• SvelteKit - Potential Information Leakage from the State by Yuki Ishii
• Fine-Grained Reactivity in Svelte 5 by Frontend Masters
• Broadcasting messages on Chrome extensions by Wilker Lucio
• Everything you need to know about: Svelte by Jeo Carlo Lubao

To Watch

• Svelte 4 vs Svelte 5 🎇. what are the difference by Lawal Adebola
• How to deploy your Sveltekit application with Firebase Hosting and Firebase Functions (adapter-node) by Melchisedek Dulcio

Libraries, Tools & Components

• This gooey tooltip is fluid and satisfying
• select-kit is a one-stop solution for all your select/combobox/autocomplete needs
• ssgoi is a page transition library thats support animated page transition with every browser - including Safari
• @svelte-put/preaction is a proof-of-concept Svelte preprocessor that allows usage of “preaction” - an extension to Svelte action with the ability to add static attributes on server-side
• svelte-standalone is a series of configurations that aims to process any svelte widget to a single standalone javascript file
• svelte-cartesian is a single component that helps with rendering all prop combinations of a provided component for visual regression testing

That’s it for this month! Let us know if we missed anything on Reddit or Discord.

Until next time 👋