You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/documentation/blog/2023-12-01-whats-new-in-sve...

11 KiB

title description author authorURL
What's new in Svelte: December 2023 Svelte 5 preview announced at Svelte Summit Fall 2023 Dani Sandoval https://dreamindani.com

Svelte Summit Fall 2023 was epic! Featuring talks from across the ecosystem and the launches from the core team of new Svelte Dev Tools, image optimization, and a preview version of Svelte 5.0! The whole talk can be found here (timestamps below):

  • 0:00 Hype music!
  • 18:20 Exploring Svelte DevTools - Ignatius B (4 minutes)
  • 25:27 How does SvelteKit fare as a SPA Framework - Henry Lie (25 minutes)
  • 53:00 enhanced:img - Ben McCann (6 minutes)
  • 1:03:44 inlang-paraglide JS for SvelteKit i18n - Samuel Stroschein (10 minutes)
  • 1:17:32 How Svelte & GraphQL plays well together - Jean-Yves Couet (31 minutes)
  • 1:53:10 svelte-ecosystem-ci - Dominik G (10 minutes)
  • 2:23:06 Svelte for Creative Development - Steven Stavrakis (10 minutes)
  • 2:35:33 Translating the docs - Romain I'Ourson (11 minutes)
  • 2:49:48 ENHANCE! - Paolo Ricciuti (25 minutes)
  • 3:18:25 Accessibility tips with Svelte solutions - Enrico Sacchetti (25 minutes)
  • 3:49:11 svelte@next - Rich Harris (18 minutes)

Today is also the first day of Advent of Svelte: A Svelte challenge for each day of December. Join the festivities and participate in a daily frontend challenge using Svelte!

Now let's dive into the updates...

What's new in Svelte (5.0 Preview!)

Svelte 5 preview is now available at svelte@next while Svelte 4's current version (@latest) is 4.2.7. All the changes below are from the preview's branch:

  • TypeScript is now supported natively via acorn-typescript (5.0.0-next.9, #9482)
  • The new $effect.active rune returns a boolean to indicate if an effect is active. This lets you set up subscriptions when a value is read (in an effect, or in the template) but also read values without creating subscriptions (5.0.0-next.10, Docs, #9591)
  • The new $effect.root rune creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control (5.0.0-next.14, Docs, #9638)

For all the release notes going forward, check out the CHANGELOG on main. For the highlights, take a look below!

What's new in SvelteKit

  • Creating a new SvelteKit project will now ask if you want to try the Svelte 5 beta (#11026)
  • Prettier 3 and prettier-plugin-svelte 3 are now the default versions when creating new SvelteKit projects (#10410)
  • nodejs20.x is now supported via the Vercel adapter (#11067)
  • @sveltejs/enhanced-img makes serving different sizes of images easy, thanks to pre-processing (Docs, #10788)

For a complete list of bug fixes and performance updates, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

What's new in Language Tools

  • The latest version of language tools adds best-effort fallback typings to $props() rune (extensions-108.1.0)
  • Language tools better supports the @render tag by using the Snippet type (extensions-108.0.0)
  • The Svelte ESLint plugin has been updated to support the Svelte 5 preview (v2.36.0-next.2)

Community Showcase

Apps & Sites built with Svelte

  • MobileView is a Chrome Extension for real-time, cross-device website simulation
  • ClassroomIO is an Open Source Platform for Tech Bootcamps
  • sshx is a secure web-based, collaborative terminal
  • ToneShift lets you clone any voice, create music, and join a community of voices
  • CanvasGPT is Autonomous Mind Maps. Powered by AI
  • Wordplay is a new educational, accessible, and language-inclusive programming language for creating playful, interactive typography (Blog Post)
  • CodeFlow is a roadmap for programmers to learn, think and code better
  • Teller is a comprehensive Minecraft backup solution designed to facilitate both local backups and interfacing with the ChunkVault Backend
  • Sudoku is a board created with SvelteKit, Typescript and Tailwind

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch/Hear

To Read

Libraries, Tools & Components

  • sveltekit-view-transition provides a simplified view-transition-api for Sveltekit
  • T18S aims to provide the best internationalization experience for SvelteKit, delivering typesafety, performance, and ease of use
  • Svelte Flow is a customizable Svelte component for building node-based editors and interactive diagrams
  • Super Sitemap is a SvelteKit sitemap focused on ease of use and making it impossible to forget to add your paths
  • Svelte UX is a Tailwind-based component library to simplify creating highly interactive and visual applications
  • CanIKit provides a simple way to add authorization to your SvelteKit application
  • Svelte Toggles manages light & dark mode interactions and preference storage
  • Baselime now supports SvelteKit for the edge-logger package

That's it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋