Skip to main content

What's new in Svelte: September 2024

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

Dani Sandoval

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

To Read

To Watch

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 👋