Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: "What's new in Svelte" April newsletter #10907

Merged
merged 4 commits into from
Apr 2, 2024
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 77 additions & 0 deletions documentation/blog/2024-04-01-whats-new-in-svelte-april-2024.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
---
title: "What's new in Svelte: April 2024"
description: 'Svelte Summit Spring on April 27! Plus: Maps, Dates and Sets'
DreaminDani marked this conversation as resolved.
Show resolved Hide resolved
author: Dani Sandoval
authorURL: https://dreamindani.com
---

Spring is just around the corner (for half the globe at least), which means [Svelte Summit Spring](https://www.sveltesummit.com/) 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](https://www.sveltesummit.com/2024/spring/submit).
DreaminDani marked this conversation as resolved.
Show resolved Hide resolved

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](https://svelte-5-preview.vercel.app/docs/introduction) and gets closer to release every day. Below, you'll find some highlights from its [changelog](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md):

- 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](https://svelte-5-preview.vercel.app/docs/runes#state-frozen-reactive-map-set-and-date), [#10803](https://github.com/sveltejs/svelte/pull/10803), [#10622](https://github.com/sveltejs/svelte/pull/10622), [#10781](https://github.com/sveltejs/svelte/pull/10781))
DreaminDani marked this conversation as resolved.
Show resolved Hide resolved
- state/derived/props can be explicitly exported from components again (**5.0.0-next.62**, [#10523](https://github.com/sveltejs/svelte/pull/10523))
- `bind:value` now allows for a dynamic `type` attribute - fixing issues with common input bindings (**5.0.0-next.66**, [#10608](https://github.com/sveltejs/svelte/pull/10608))
- `SSR` HTML mismatch validation has been improved and provides clearer error messages (**5.0.0-next.69**, [#10658](https://github.com/sveltejs/svelte/pull/10658))
- **Breaking:** Slots inside templates with a `shadowrootmode` attribute are now preserved (**5.0.0-next.73**, [#10721](https://github.com/sveltejs/svelte/pull/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](https://github.com/sveltejs/svelte/pull/10694))
- The new `$bindable` rune allows parents to `:bind` to a component's prop in addition to using them as regular props ([Docs](https://svelte-5-preview.vercel.app/docs/runes#props-bindable), [#10851](https://github.com/sveltejs/svelte/pull/10851))
- The webkitdirectory DOM boolean attribute is now supported (**5.0.0-next.81**, [#10847](https://github.com/sveltejs/svelte/pull/10847))
- Form resets are now taken into account for two way bindings (**5.0.0-next.82**, [Docs](https://svelte-5-preview.vercel.app/docs/breaking-changes#other-breaking-changes-bindings-now-react-to-form-resets), [#10617](https://github.com/sveltejs/svelte/pull/10617))

DreaminDani marked this conversation as resolved.
Show resolved Hide resolved

## What's new in SvelteKit

Just bugfixes this month! For all the changes in kit, check out the [CHANGELOG](https://github.com/sveltejs/kit/blob/main/packages/kit/CHANGELOG.md).
DreaminDani marked this conversation as resolved.
Show resolved Hide resolved

DreaminDani marked this conversation as resolved.
Show resolved Hide resolved

---

## Community Showcase

**Apps & Sites built with Svelte**

- [notepad](https://www.usenotepad.com/) is a workspace for freelancers. Providing time tracking, tasks, reports, invoices and contacts all in one tool.
- [Tokenbase](https://github.com/mateoroldos/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](https://mellobacon.github.io/mello_os/) is a fake OS desktop in the style of Windows 95
- [PowerHound](https://powderhound.io/) is an app for tracking snow conditions across Colorado's ski resorts and backcountry
- [ProductSurveys](https://productsurveys.io/) gathers user feedback directly inside your product
- [WAIfinder](https://github.com/nestauk/dsp_waifinder) is an interactive map shows entities operating in the AI industry in the UK
- [talkmedown](https://talkmedown.net/) is an emergency landing survival game using SvelteKit UI and Three.js graphics.
- [Bird Flapping](https://github.com/zonetecde/bird-flapping) is that game with a flapping bird (not to be confused with FlappyBird)
- [Minesweeper](https://codeberg.org/wires5210/minesweeper-funnymode) FUNNYMODE is minesweeper, but FUNNY
- [Routickr](https://www.routickr.com/) is a habit-tracking app with Firefox and Chrome extensions

DreaminDani marked this conversation as resolved.
Show resolved Hide resolved
**Learning Resources**

_Featuring Svelte Contributors and Ambassadors_
- Svienna (Svelte Society Vienna):
- [Domenik Reitzner - A brief history of prototyping](https://www.youtube.com/watch?v=auqkebVQYXE)
- [Lukas Stracke - Building an Error and Performance Monitoring SDK for SvelteKit](https://www.youtube.com/watch?v=N8Hs-LVL_f8)
- [Jean Yves Couët - Are you on the right route? ](https://www.youtube.com/watch?v=K8sKpMSCOiE)
- [Lucas Martin - Using SvelteKit to Build An Interactive Portfolio](https://www.youtube.com/watch?v=wAttcVDP4Ec)
- This Week in Svelte:
- [22 Mar 2024](https://www.youtube.com/watch?v=QiAMLIyM894)
- [8 Mar 2024](https://www.youtube.com/watch?v=_vQVkOa5K-s)

_To Read/Watch_

- [How we built our 41kb SaaS Website](https://criticalmoments.io/blog/how_we_built_our_marketing_page) by Critical Moments
- [Migrating a personal homepage to Svelte](https://jakeout.com/posts/2024-03-04-svelte) by Jake Ouelletee


**Libraries, Tools & Components**

- [Svisualize](https://svisualize.dev/) is a VS Code Extension that visualizes your components as you code
- [Neel/UI](https://github.com/aidan-neel/neel-ui) is a shadcn-inspired set of customizable components that you can copy and paste into your SvelteKit apps
- [BLICKCSS](https://blick.netlify.app/) 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](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).

Until next month 👋
Loading