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 theSnippet
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
- View Transitions in SvelteKit and beyond with Geoff Rich and Melting UIs with Thomas G. Lopes by Svelte Radio
- Making The Best Svelte SVG Animation Library, How To Publish Your JavaScript Code To Npm With SvelteKit, and What's New In Svelte 5? (Runes, Events, Snippets) by Joy of Code
- Svelte Society Talks
- Svelte Society - San Diego November 2023
- Building a SvelteKit Adapter for WinterJS with Willow and Kev
- This Week in Svelte:
- 2023 October 27 - SvelteKit 1.27.1, the pillars of a component library
- 2023 November 3 - SvelteKit 1.27.2, choosing a database, preprocessors
- 2023 November 10 - SvelteKit 1.27.4, Svelte 4.2.3, closing modals
- 2023 Nov 17 - SvelteKit 1.27.6, Svelte 4.2.5, new Svelte 5 features!
- 2023 Nov 24 - Svelte 4.2.7, TypeScript in markup, websockets in SvelteKit
To Watch/Hear
- Why Stack Overflow is embracing Svelte by The Stack Overflow Podcast
- Building a Twitter Clone with Svelte, SvelteKit, ,Firebase, Tailwind Css, Shad-cn Svelte etc by Lawal Adebola
- SvelteKit Crash Course: Build a Full Website in 90 min! - 2023 Tutorial by Prismic
To Read
- Hands-On Experience: How to Build an eCommerce Store with SvelteKit? by Bård Farstad
- Productive Dark Mode with SvelteKit, PostCSS, and TailwindCSS (Behind the Screen) by Quang Phan
- Setting up OAuth with Auth.js in a SvelteKit Project by Andrey Mikhaylov
- SvelteKit 🤝 Storybook by Paolo Ricciuti
- Integrate Storybook in Svelte: Doing it the Svelte-way by Óscar Domínguez Celada
- Drizzle ORM with Sveltekit and Sveltekit — Streaming SSR by Mohammed Anas
- Svelte & WordPress Full Stack Course by Artneo Web Design on udemy
- Add a loading indicator to a Form Action in SvelteKit by Useful Snippets (Stanislav Khromov)
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 👋