|
| 1 | +--- |
| 2 | +title: "What's new in Svelte: December 2024" |
| 3 | +description: 'A better CLI and a bunch of UI libraries now support Svelte 5' |
| 4 | +author: Dani Sandoval |
| 5 | +authorURL: https://dreamindani.com |
| 6 | +--- |
| 7 | + |
| 8 | +I can't believe it's already the last newsletter of the year! So much has happened in the Svelte community - from two great Svelte Summits to the release Svelte 5 🎉 |
| 9 | + |
| 10 | +As we look forward to the next year and watch the Svelte team do [24 features in 24 days](advent-of-svelte), let's dive into what's new in the past month... |
| 11 | + |
| 12 | +## What's new in Svelte |
| 13 | + |
| 14 | +The bugfix versions in 5.1.x and 5.2.x addressed a bunch of issues reported by the community. So if you're noticing anything weird, make sure you upgrade to the latest version and, as always, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) for all the bug fixes. |
| 15 | + |
| 16 | +The features since last month can be found below: |
| 17 | + |
| 18 | +- `ContentVisibilityAutoStateChangeEvent` has been added to element definitions (**5.2.5**, [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/ContentVisibilityAutoStateChangeEvent), [#14373](https://github.com/sveltejs/svelte/pull/14373)) |
| 19 | + |
| 20 | +## What's new in SvelteKit, Svelte CLI and Language Tools |
| 21 | + |
| 22 | +- `isActionFailure` is a new helper method to check if a variable is an instanceof `ActionFailure` - helpful for debugging parsing of user input (**2.8.0**, [#12878](https://github.com/sveltejs/kit/pull/12878)) |
| 23 | +- `const load = ...` declarations will now be typed automatically (**svelte2tsx-0.7.23**, [#2540](https://github.com/sveltejs/language-tools/pull/2540)) |
| 24 | +- The CLI will now include a `jsconfig.json` in the 'no type checking' template (**0.6.2**, [#290](https://github.com/sveltejs/cli/pull/290)) |
| 25 | +- When installing dependencies, the CLI will display the package manager's output (**0.6.3**, [#305](https://github.com/sveltejs/cli/pull/305)) |
| 26 | +- A short description will now be shown for each add-on in the CLI menu (**0.6.5**, [#299](https://github.com/sveltejs/cli/pull/299)) |
| 27 | +- Instance types will now be provided automatically in Svelte 5 (**svelte2tsx-0.7.23**, [#2553](https://github.com/sveltejs/language-tools/pull/2553)) |
| 28 | +- A code lens indicator for "runes mode" will now appear atop a file when detected - "legacy mode" when not (**language-server-0.17.4**, [#2554](https://github.com/sveltejs/language-tools/pull/2554)) |
| 29 | + |
| 30 | +--- |
| 31 | + |
| 32 | +## Community Showcase |
| 33 | + |
| 34 | +### Apps & Sites built with Svelte |
| 35 | + |
| 36 | +- [Unsubscribe](https://unsubscribe.jnr.cx/) is an interactive site that makes fun of how hard it is to unsubscribe from things on the internet these days |
| 37 | +- [Dealcrane](https://dealcrane.com/?utm_source=discord&utm_medium=social&utm_campaign=beta_promo&utm_content=svelte) helps technology shoppers find discounts across popular internet shopping sites |
| 38 | +- [Raw Web](https://rawweb.org/) is a search engine for indexing the content of independent, especially personal, websites |
| 39 | +- [Jovian Moon's personal site](https://github.com/StephenGunn/jovian) features an interactive rocket ship to fly you straight to Jupiter (or anywhere else you want to go) |
| 40 | +- [Font Preview](https://github.com/songkeys/font-preview) makes it easy to analyze and explore font characters in the browser |
| 41 | +- [Dunks & Threes](https://dunksandthrees.com/) is a professional basketball analysis platform that provides data-driven NBA predictions |
| 42 | +- [AdresseDuBien](https://adressedubien.com/) is a small utility to find addresses for real estate ads (for France) with a Libre Map implementation |
| 43 | +- [PixelAttack](https://jason1610.github.io/PixelAttack/) takes an image, pixelizes it and makes the pixels fight each other |
| 44 | +- [NeoHtop](https://github.com/Abdenasser/neohtop) is a modern, process monitoring tool that combines the power of terminal-based system monitors with a clean, desktop-native UI |
| 45 | +- [WebVM](https://github.com/leaningtech/webvm) is a Linux virtual machine that runs in your browser |
| 46 | +- [Sveltris](https://svelte.dev/playground/8594eea15c6244908c3efad284fe2aa4?version=5.2.1) is Tetris built entirely in the Svelte REPL |
| 47 | + |
| 48 | +### Learning Resources |
| 49 | + |
| 50 | +_Featuring Svelte Contributors and Ambassadors_ |
| 51 | + |
| 52 | +- [Svelte 🧡](https://bsky.app/profile/paolo.ricciuti.me/feed/svelte-feed) is a Bluesky feed to keep up to date on Svelte news in that application |
| 53 | +- [SvelteKit Streaming: The Complete Guide](https://khromov.se/sveltekit-streaming-the-complete-guide/) by Stanislav Khromov |
| 54 | +- [Remote Workshop: Svelte 5 & Runes](https://ti.to/mainmatter/svelte-5-runes-feb-2025) is taking place February 6-7th, 2025 and taught by Paolo Ricciuti |
| 55 | +- [Svelte 5: In Action | Build A Tasks App](https://www.youtube.com/watch?v=uSWMvDPpG0k) by Syntax |
| 56 | +- [Svelte Society London](https://www.youtube.com/watch?v=mxM208nCvHc) - featuring Paolo with his talk, _Herd your async tasks!_ |
| 57 | + |
| 58 | +_This Week in Svelte_ |
| 59 | + |
| 60 | +- [Ep. 83](https://www.youtube.com/watch?v=1a-iKUCF5_g) — You might not need an effect |
| 61 | +- [Ep. 84](https://www.youtube.com/watch?v=kVbQyKf4Oe4) — manifest.build |
| 62 | +- [Ep. 85](https://www.youtube.com/watch?v=yY963ovcDQ0) — @sheepdog/svelte |
| 63 | + |
| 64 | +_To Read_ |
| 65 | + |
| 66 | +- [Web software development (2024)](https://fitech101.aalto.fi/web-software-development/) is a self-study course for all things web development and features Svelte heavily |
| 67 | +- [Async Fetching in Svelte 5](https://dev.to/jdgamble555/async-fetching-in-svelte-5-826) by Jonathan Gamble |
| 68 | +- [Cross-Origin-Isolation with SvelteKit, Vite, and Firebase](https://www.captaincodeman.com/cross-origin-isolation-with-sveltekit-vite-and-firebase) by Captain Codeman |
| 69 | +- [The $effect.tracking rune](https://www.matsimon.dev/blog/svelte-in-depth-effect-tracking) by Matt Simon |
| 70 | + |
| 71 | +### Libraries, Tools & Components |
| 72 | + |
| 73 | +_Component Libraries_ |
| 74 | + |
| 75 | +- [shadcn-svelte](https://next.shadcn-svelte.com/) now supports Svelte 5 and has brand new docs to go with the update |
| 76 | +- [Zag](https://zagjs.com/overview/introduction) now supports Svelte 5 |
| 77 | +- [Skeleton V3](https://github.com/skeletonlabs/skeleton/discussions/2919) is now in beta (and, as expected, supports Svelte 5) |
| 78 | +- [Storybook 8.4](https://www.reddit.com/r/sveltejs/comments/1gpqusy/storybook_84_release/) now supports Svelte 5 and CSF natively with component testing built-in |
| 79 | + |
| 80 | +_Icon Libraries_ |
| 81 | + |
| 82 | +- [svelicon](https://github.com/friendofsvelte/svelicon) converts Iconify SVG icons to type-safe components with one command |
| 83 | +- [moving icons](https://www.movingicons.dev/) is a collection of animated icons based on the lucide icon library |
| 84 | +- [Monicon](https://github.com/oktaysenkan/monicon) is an all-in-one icon library that provides 200,000+ icons from popular sets like Material Design, Feather, and Font Awesome |
| 85 | + |
| 86 | +_Everything Else_ |
| 87 | + |
| 88 | +- [Svelte Multitone Image](https://stephane-vanraes.github.io/svelte-multitoneimage/) is a simple image renderer to apply multitone effects for Svelte |
| 89 | +- [number-flow](https://github.com/barvian/number-flow) is a component to transition, format, and localize numbers |
| 90 | +- [sveltednd](https://github.com/thisuxhq/SvelteDnD) is a lightweight, flexible drag and drop library for Svelte 5 applications |
| 91 | +- [ShadEditor](https://github.com/Tsuzat/ShadEditor) is a highly extensible text editor for svelte made with TipTap and ShadCN UI |
| 92 | +- [Tipex](https://www.npmjs.com/package/@friendofsvelte/tipex) is an advanced rich text editor based on Tiptap and Prosemirror |
| 93 | +- [svelte-bundle](https://github.com/uhteddy/svelte-bundle) is a tool for bundling Svelte components into a single HTML file |
| 94 | +- [svelte5-router](https://github.com/mateothegreat/svelte5-router) is an SPA router that allows you to divide & conquer your app with nested routers |
| 95 | +- [@sheepdog/svelte](https://github.com/mainmatter/sheepdog) is a library to manage async tasks and concurrency with ease. |
| 96 | + |
| 97 | +That's it for this huge month in Svelte! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte). |
| 98 | + |
| 99 | +Until next ~~time~~ year! 👋 |
0 commit comments