What's new in Svelte: September 2024

More useful `svelte:options` and `:global`, plus the deprecation of `<svelte:component>` in Svelte 5

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 (svelte2tsx@0.7.14, #2428)

• You can now specify a tsconfig in emitDts - helpful when working in a monorepo (svelte2tsx@0.7.16, #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 👋