Skip to content

Commit d2b012d

Browse files
docs: "What's new in Svelte" September newsletter (#13017)
* September draft * add requested showcases * Apply suggestions from code review --------- Co-authored-by: Simon H <[email protected]>
1 parent d8b3133 commit d2b012d

File tree

1 file changed

+83
-0
lines changed

1 file changed

+83
-0
lines changed
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
title: "What's new in Svelte: September 2024"
3+
description: 'More useful `svelte:options` and `:global`, plus the deprecation of `<svelte:component>` in Svelte 5'
4+
author: Dani Sandoval
5+
authorURL: https://dreamindani.com
6+
---
7+
8+
A bunch of updates to Svelte dropped in the last few weeks, plus a few quality of life improvements in the Svelte language tools.
9+
10+
Let's take a look...
11+
12+
## What's new in Svelte and Language Tools
13+
14+
- `$state.frozen` has been replaced with `$state.raw` (**5.0.0-next.218**, [Docs](https://svelte-5-preview.vercel.app/docs/runes#state-raw), [#12808](https://github.com/sveltejs/svelte/pull/12808))
15+
- `$state.is` has been removed. RIP, little guy ([#12916](https://github.com/sveltejs/svelte/pull/12916))
16+
- `svelte:options` now lets you set the `css: "inject"` compiler option on a per-component basis (**5.0.0-next.209**, [#12660](https://github.com/sveltejs/svelte/pull/12660))
17+
- `<svelte:component>` is now unnecessary in runes mode and therefore is deprecated (**5.0.0-next.203/217**, [#12646](https://github.com/sveltejs/svelte/pull/12646) and [#12694](https://github.com/sveltejs/svelte/pull/12694))
18+
- `:global` is now allowed in more places - making it easier to use in `<style>` tags and fixing issues with Tailwind's `@apply` (**5.0.0-next.199**, [Docs](https://github.com/sveltejs/svelte/blob/main/documentation/docs/02-template-syntax/05-styles-and-classes.md), [#12560](https://github.com/sveltejs/svelte/pull/12560))
19+
- Svelte's typescript definition generator that comes with `@sveltejs/package` will now warn when its diagnostics detect that a `d.ts` file was not generated (**[email protected]**, [#2428](https://github.com/sveltejs/language-tools/pull/2428))
20+
- You can now specify a tsconfig in `emitDts` - helpful when working in a monorepo (**[email protected]**, [#2454](https://github.com/sveltejs/language-tools/pull/2454))
21+
22+
Not covered in this list are a ton of efficiency and performance improvements across css and javascript compilation. If you're interested, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) for more on how destructuring, state proxies and actions/styles/classes have all improved since last month.
23+
24+
---
25+
26+
## Community Showcase
27+
28+
**Apps & Sites built with Svelte**
29+
30+
- [Apple Podcasts for the web](https://podcasts.apple.com/us/browse) now uses Svelte
31+
- [UCLA Student Affairs](https://www.studentaffairs.ucla.edu/) has created their website with SvelteKit
32+
- [tidytube](https://github.com/kakajuro/tidytube) is a browser extension to declutter Youtube's UI
33+
- [Graphite](https://graphite.rs/blog/graphite-progress-report-q2-2024/) is an open source 2D procedural graphics editor
34+
- [My Yogi](https://www.yogi.my/) is a yoga sequence builder and manager
35+
- [Mark Of Destiny](https://markofdestiny.com/) is a multiplayer online strategy game where you are the ruler of a small developing kingdom
36+
- [Dungeons and Jacks](https://github.com/deozza/roguejack) is a game mixing blackjack and roguelite elements
37+
- [YT Desk](https://github.com/isaxk/ytdesk) is a standalone player for YouTube and Youtube Music with a miniplayer, Discord "Rich Presence" and global shortcuts
38+
- [Synapsis](https://h.tronic247.com/introducing-synapsis-the-complete-ai-based-learning-platform) is an AI-based learning platform
39+
- [SvelteCareers](https://sveltecareers.com/) is a new Svelte job site that posts job alerts every Monday
40+
41+
**Learning Resources**
42+
43+
_Featuring Svelte Contributors and Ambassadors_
44+
- [React VS Svelte - Which one should you choose in 2024?](https://www.youtube.com/watch?v=fR6DFKq13J0), [Svelte 5 Runes - How to talk to the compiler](https://www.youtube.com/watch?v=_SpO5T96AYY) and [Creating your JavaScript framework?](https://www.youtube.com/watch?v=i-BkN3rTK0Q) by Prismic (featuring Rich Harris)
45+
- [Local First with Replicache - How to Build a Full Stack App with Data Syncing Part 1](https://www.youtube.com/watch?v=7gZGVT5wdX4) by Syntax
46+
- [Avoid Using Effects To Derive Values In Svelte](https://www.youtube.com/watch?v=7N4maEDhy4w) and [Understanding Effects In Svelte And When To Use Them](https://www.youtube.com/watch?v=HRz_rU2BlZc) by Joy of Code
47+
- [Svelte Dev Vlog (with Simon) — July 2024](https://www.youtube.com/watch?v=uqnbA1xDe8k)
48+
- [Svelte London - August](https://www.youtube.com/watch?v=QUdntTVombw): Svelte's Boundary Areas and Prototyping Tools (in Svelte!)
49+
- This Week in Svelte:
50+
- [Ep. 71](https://www.youtube.com/watch?v=cdbSCoJ6_SU) — Listening to object updates using $effect, IntelliJ, Icons
51+
- [Ep. 72](https://www.youtube.com/watch?v=g_XLZlrGEuc) — Changelog, using AI with Svelte 4 and 5, Icon components
52+
- [Ep. 73](https://www.youtube.com/watch?v=w1PfHMMbkvw) — Changelog, OptimistiKit, database options
53+
54+
55+
_To Read_
56+
57+
- [Svelte 5 signals fix its glitchy and inconsistent reactivity](https://www.webdevladder.net/blog/svelte-5-signals-fix-its-glitchy-and-inconsistent-reactivity) by webdevladder
58+
- [Why Svelte is a game changer for IIoT development](https://behind.flatspot.pictures/svelte-for-iiot-hmis-the-future-of-industrial-interfaces/) by Peter Repukat
59+
- [Local First with Cloud Sync using Firestore and Svelte 5 Runes](https://captaincodeman.com/local-first-with-cloud-sync-using-firestore-and-svelte-5-runes) by Captain Codeman
60+
- [SvelteKit - Potential Information Leakage from the State](https://blog.yuki-dev.com/blogs/jv8q0pt_42vl#hef725b6a43) by Yuki Ishii
61+
- [Fine-Grained Reactivity in Svelte 5](https://frontendmasters.com/blog/fine-grained-reactivity-in-svelte-5/) by Frontend Masters
62+
- [Broadcasting messages on Chrome extensions](https://medium.com/@wilkerlucio/broadcasting-messages-on-chrome-extensions-6f7718c662f5) by Wilker Lucio
63+
- [Everything you need to know about: Svelte](https://medium.com/@jeooocarlo/everything-you-need-to-know-about-svelte-b63ff0f5d1b4) by Jeo Carlo Lubao
64+
65+
66+
_To Watch_
67+
68+
- [Svelte 4 vs Svelte 5 🎇. what are the difference](https://www.youtube.com/watch?v=CbZUXGhxZX8) by Lawal Adebola
69+
- [How to deploy your Sveltekit application with Firebase Hosting and Firebase Functions (adapter-node)](https://www.youtube.com/watch?v=Yle8DtdMYmo) by Melchisedek Dulcio
70+
71+
72+
**Libraries, Tools & Components**
73+
74+
- [This gooey tooltip](https://svelte.dev/repl/790fd75f954846be83afaa9e5ea821a8?version=4.2.18) is fluid and satisfying
75+
- [select-kit](https://github.com/snehalbaghel/select-kit) is a one-stop solution for all your select/combobox/autocomplete needs
76+
- [ssgoi](https://github.com/meursyphus/ssgoi) is a page transition library thats support animated page transition with every browser - including Safari
77+
- [@svelte-put/preaction](https://svelte-put-next.vnphanquang.com/docs/preaction) is a proof-of-concept Svelte preprocessor that allows usage of "preaction" - an extension to Svelte action with the ability to add static attributes on server-side
78+
- [svelte-standalone](https://github.com/brenoliradev/svelte-standalone) is a series of configurations that aims to process any svelte widget to a single standalone javascript file
79+
- [svelte-cartesian](https://github.com/theetrain/svelte-cartesian) is a single component that helps with rendering all prop combinations of a provided component for visual regression testing
80+
81+
That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
82+
83+
Until next time 👋

0 commit comments

Comments
 (0)