msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b4669b8da2'
${ noResults }
svelte/documentation/blog/2024-04-01-whats-new-in-sve...

6.0 KiB
Raw Blame History

title description author authorURL
What's new in Svelte: April 2024 Svelte Summit Spring on April 27! Plus: Maps, Dates and Sets Dani Sandoval https://dreamindani.com

Spring is just around the corner (for half the globe at least), which means Svelte Summit Spring is coming soon! The event will take place on April 27 and could feature you (yes you!). The call for proposals is happening now so submit a talk (or three!) at this form.

Also, this month, a ton of new features have been merged into Svelte 5 to make it the best version of Svelte yet. We'll get into them all below, so let's jump right in!

What's new in Svelte

Svelte 5 is in preview and gets closer to release every day. Below, you'll find some highlights from its changelog:

  • The new Map, Date and Set classes can now be imported from svelte/reactivity and used just like their native counterparts to improve tree-shaking and make these objects fit better into Svelte's reactivity model (5.0.0-next.79/67/76,, Docs, #10803, #10622, #10781)
  • state/derived/props can be explicitly exported from components again (5.0.0-next.62, #10523)
  • bind:value now allows for a dynamic type attribute - fixing issues with common input bindings (5.0.0-next.66, #10608)
  • SSR HTML mismatch validation has been improved and provides clearer error messages (5.0.0-next.69, #10658)
  • Breaking: Slots inside templates with a shadowrootmode attribute are now preserved (5.0.0-next.73, #10721)
  • Breaking: The $props() no longer accepts a generic type argument. Instead, component authors should type their props like any other variable declaration (5.0.0-next.76, #10694)
  • The new $bindable rune allows parents to :bind to a component's prop in addition to using them as regular props (Docs, #10851)
  • The webkitdirectory DOM boolean attribute is now supported (5.0.0-next.81, #10847)
  • Form resets are now taken into account for two way bindings (5.0.0-next.82, Docs, #10617)

What's new in SvelteKit

Just bugfixes this month! For all the changes in kit, check out the CHANGELOG.

Community Showcase

Apps & Sites built with Svelte

  • notepad is a workspace for freelancers. Providing time tracking, tasks, reports, invoices and contacts all in one tool.
  • Tokenbase is a free tool for creating, managing and distributing Design Tokens. Easily create your Design Systems and export them to code in a few clicks.
  • MelloOS is a fake OS desktop in the style of Windows 95
  • PowerHound is an app for tracking snow conditions across Colorado's ski resorts and backcountry
  • ProductSurveys gathers user feedback directly inside your product
  • WAIfinder is an interactive map shows entities operating in the AI industry in the UK
  • talkmedown is an emergency landing survival game using SvelteKit UI and Three.js graphics.
  • Bird Flapping is that game with a flapping bird (not to be confused with FlappyBird)
  • Minesweeper FUNNYMODE is minesweeper, but FUNNY
  • Routickr is a habit-tracking app with Firefox and Chrome extensions

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Read/Watch

Libraries, Tools & Components

  • Svisualize is a VS Code Extension that visualizes your components as you code
  • Neel/UI is a shadcn-inspired set of customizable components that you can copy and paste into your SvelteKit apps
  • BLICKCSS is a small (~30kb) CSS library to build great websites and web apps quickly and easily

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

Until next month 👋