diff --git a/documentation/blog/2024-03-01-whats-new-in-svelte-march-2024.md b/documentation/blog/2024-03-01-whats-new-in-svelte-march-2024.md new file mode 100644 index 000000000000..32494515d542 --- /dev/null +++ b/documentation/blog/2024-03-01-whats-new-in-svelte-march-2024.md @@ -0,0 +1,83 @@ +--- +title: "What's new in Svelte: March 2024" +description: 'Nested CSS support and a much cleaner client-side API for Svelte 5' +author: Dani Sandoval +authorURL: https://dreamindani.com +--- + +This month, the Svelte maintainers made a ton of progress on Svelte 5 and Rich Harris talked to Prismic about how the team is working on making the framework even better. + +Lots to showcase too... so let's dive in! + + +## What's new in Svelte + +As you may already have heard, [Svelte 5 is in preview](https://svelte-5-preview.vercel.app/docs/introduction). In the meantime, Svelte 4 (`@latest`) has had [one bugfix](https://github.com/sveltejs/svelte/blob/svelte-4/packages/svelte/CHANGELOG.md). The Svelte 5 changelog has quite a few updates, though: + +- breaking: `$derived.call` is now `$derived.by` (**5.0.0-next.54**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#$derived-by), [#10445](https://github.com/sveltejs/svelte/pull/10445)) +- Destructuring derived object properties will now keep fine-grain reactivity (**5.0.0-next.55**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#derived), [#10488](https://github.com/sveltejs/svelte/pull/10488)) +- The new `hydrate` method makes hydration-related code treeshakeable (**5.0.0-next.56**, [Docs](https://svelte-5-preview.vercel.app/docs/functions#hydrate), [#10497](https://github.com/sveltejs/svelte/pull/10497)) +- Nested CSS is now supported, along with better support for `:is(...)` and `:where(...)` (**5.0.0-next.57**, [#10490](https://github.com/sveltejs/svelte/pull/10490)) +- breaking: The client-side API has been simplified by removing `createRoot`, adjusting the `mount`/`hydrate` APIs and introducing `unmount` (**5.0.0-next.58**, [Issue#9827](https://github.com/sveltejs/svelte/issues/9827), [#10516](https://github.com/sveltejs/svelte/pull/10497)) + +For all the bug fixes, chores and underlying work required to get Svelte 5 to release-ready, check out [the CHANGELOG on main](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md). + + +## What's new in SvelteKit + +Mostly bug fixes, this month. Most notably is a fix to prevent stale values after navigation (**2.5.1**, [#11870](https://github.com/sveltejs/kit/pull/11870)). + +Adapters can also now use an `emulate` function to provide dev and preview functionality (**2.5.0**, [Docs](https://kit.svelte.dev/docs/writing-adapters), [#11730](https://github.com/sveltejs/kit/pull/11730)). This will allow for an improved experience developing for Cloudflare in the near future ([11732](https://github.com/sveltejs/kit/pull/11732)). + +For all the changes in SvelteKit, check out the [CHANGELOG](https://github.com/sveltejs/kit/blob/main/packages/kit/CHANGELOG.md). + + +--- + +## Community Showcase + +**Apps & Sites built with Svelte** + +- [Wishgram](https://www.wishgram.xyz/) is a tool to generate handwritten wishing cards +- [rfidify](https://github.com/jonathanjameswilliams26/rfidify) is a Raspberry PI RFID reader that plays things on Spotify +- [listn.fyi](https://listn.fyi/) is a fun and easy way to share what music you're currently into +- [Meowrite](https://www.meowrite.com/) is an AI writing tool for cover letters, essays and more +- [Photo Multitool](https://www.photomultitool.com/) is a free set of online tools for manipulating photos +- [sveltekit-weather-app](https://github.com/maxjerry0107/sveltekit-weather-app) is a gorgeous weather app made with SvelteKit + +**Learning Resources** + +_Featuring Svelte Contributors and Ambassadors_ +- [How to make a great framework better? - Svelte 5 with Rich Harris](https://www.youtube.com/watch?v=z7n17ajJpCo) by Prismic +- [Svelte 5 is a beast, but is it worth switching?](https://www.youtube.com/watch?v=KB6zkvYJqoE&lc=UgxFIaNKUG5as18CSzp4AaABAg) by Syntax.FM +- This Week in Svelte: + - + +_To Read/Watch_ + +- [Upgrading to Svelte 5](https://gitcontext.com/blog/svelte-5-upgrade) by Mike Stachowiak +- [Building with GPT4 and Svelte](https://kvak.io/meoweler) by Lev Miseri +- [Mini site for recommending songs using Svelte & Deno](https://blog.bryce.io/mini-site-for-recommending-songs-using-svelte-deno) by Bryce Dorn +- [Effortlessly Sync Your SvelteKit Frontend with Backend Using OpenAPI: A Step-by-Step Guide to Generating SDKs](https://www.launchnow.pro/blog/sveltekit-openapi-sdk-generation) by Launchnow +- [How to build an editable website in 15 minutes in 2024](https://www.svelteheadless.com/how-to-build-an-editable-website-in-15-minutes-in-2024) by Svelte Headless +- [Local-First LiveView Svelte ToDo App](https://liveview-svelte-pwa.fly.dev/) by Tony Dang + + +**Libraries, Tools & Components** + +- [PaneForge](https://github.com/svecosystem/paneforge) provides components that make it easy to create resizable panes in your Svelte apps +- [Svelte UX](https://svelte-ux.techniq.dev/) and [LayerChart](https://www.layerchart.com/) now include theme support via semantic and state classes +- [Huly Platform](https://github.com/hcengineering/platform) is a robust framework designed to accelerate the development of business applications, such as CRM systems +- [svelte-marquee](https://github.com/selemondev/svelte-marquee) is a beautiful marquee component for Svelte +- [Just Ship](https://github.com/ocluf/justship) is a SvelteKit auth boilerplate for Svelte 5 +- [cells](https://github.com/okcontract/cells) is a functional & reactive library for Svelte +- [Svelte Headless](https://github.com/webuildsociety/svelte-headless) is an example site showing how to create a simple blog site that plugs into a headless CMS +- [Sugar.css](https://sugar-css.com/) is a semantic, accessible, lightweight CSS framework +- [apple-svelte](https://github.com/Carza-104/apple-svelte) is a component library for Svelte based on Apple's Human Interface design language +- [SvelteKit SSE](https://github.com/tncrazvan/sveltekit-sse) provides an easy way to produce and consume server sent events. +- [Formsnap](https://github.com/huntabyte/formsnap), an accessible wrapper for sveltekit-superforms, got a major rewrite and has improved [its docs](https://formsnap.dev) + + +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 👋 diff --git a/documentation/blog/2024-04-01-whats-new-in-svelte-april-2024.md b/documentation/blog/2024-04-01-whats-new-in-svelte-april-2024.md new file mode 100644 index 000000000000..8069ac65bfbe --- /dev/null +++ b/documentation/blog/2024-04-01-whats-new-in-svelte-april-2024.md @@ -0,0 +1,86 @@ +--- +title: "What's new in Svelte: April 2024" +description: 'Svelte Summit Spring on April 27! Plus: reactive `Map`, `Date` and `Set`' +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 be streamed on [the Svelte Society YouTube channel](https://youtube.com/sveltesociety) on April 27. + +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 fit into Svelte's reactivity model (**5.0.0-next.79**, [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)) +- 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)) + + +## What's new in SvelteKit + +- `adapter-vercel` now has Skew Protection which ensures that the client and server stay in sync for any particular deployment (**@sveltejs/adapter-vercel@5.2.0**, [Docs](https://vercel.com/docs/deployments/skew-protection), [#11987](https://github.com/sveltejs/kit/pull/11987)) +- `adapter-vercel`'s build output files now include framework metadata - improving observability on the platform (**@sveltejs/adapter-vercel@5.2.0**, [#11800](https://github.com/sveltejs/kit/pull/11800)) +- `adapter-cloudflare` and `adapter-cloudflare-workers` now implement `adapter.emulate` which allows the adapter to emulate the Cloudflare platform during dev and preview ([#11732](https://github.com/sveltejs/kit/pull/11732)) +- **Breaking:** `adapter-node` now shuts down gracefully and supports the new `IDLE_TIMEOUT` and `SHUTDOWN_TIMEOUT` environment variables (**@sveltejs/adapter-node@5.0.1**, [Docs](https://kit.svelte.dev/docs/adapter-node#environment-variables-shutdown-timeout), [#11653](https://github.com/sveltejs/kit/pull/11653)) +- **Breaking:** The default value of `precompress` in `adapter-node` is now `true` - making sites faster by default (**@sveltejs/adapter-node@5.0.0**, [Docs](https://kit.svelte.dev/docs/adapter-node#options-precompress), [#11945](https://github.com/sveltejs/kit/pull/11945)) +- Google Cloud is now supported in `adapter-auto` without any additional configuration (**@sveltejs/adapter-auto@3.2.0**, [Docs](https://kit.svelte.dev/docs/adapter-auto), [#12015](https://github.com/sveltejs/kit/pull/12015)) + +For all the changes in SvelteKit, including bug fixes and adapter-specific changes check out the [CHANGELOGs in each of the packages](https://github.com/sveltejs/kit/tree/f1e73c2fe54280d254a1bdfba430a678f4db527a/packages). + + +--- + +## 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 +- [immich](https://immich.app/) is a self-hosted photo and video management solution + + +**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 👋 diff --git a/documentation/docs/02-template-syntax/01-svelte-components.md b/documentation/docs/02-template-syntax/01-svelte-components.md index adce71f6843b..7316e213b8b0 100644 --- a/documentation/docs/02-template-syntax/01-svelte-components.md +++ b/documentation/docs/02-template-syntax/01-svelte-components.md @@ -177,6 +177,7 @@ Total: {total} It is important to note that the reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them. This means that `yDependent` will not be updated when `x` is updated in the following example: ```svelte +