From 97c48500191b70e32c56983198804c7ab5207dfa Mon Sep 17 00:00:00 2001 From: Dani Sandoval Date: Sun, 22 Dec 2024 10:39:41 -0800 Subject: [PATCH 1/5] jan first draft --- ...-01-01-whats-new-in-svelte-january-2025.md | 113 ++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md diff --git a/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md new file mode 100644 index 0000000000..e68dc213c5 --- /dev/null +++ b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md @@ -0,0 +1,113 @@ +--- +title: "What's new in Svelte: January 2025" +description: 'Svelte 5 just keeps getting better. Plus, and in-person Svelte Summit!' +author: Dani Sandoval +authorURL: https://dreamindani.com +--- + +From new syntax to improved dev tooling, the Svelte team has been busy this month building new features in both Svelte and SvelteKit. And as we round the corner into the new year, there's even more to look forward to... like the *10th Svelte Summit*! [Join the Svelte community](https://www.sveltesummit.com/) online or in-person in Barcelona: May 8th and 9th. + +Now let's get to the news πŸ‘€ + +## What's new in Svelte + +- Snippets can now be exported from module scripts (**5.5.0**, [Docs](https://svelte.dev/docs/svelte/snippet#Exporting-snippets), [#14315](https://github.com/sveltejs/svelte/pull/14315)) +- `defaultValue` and `defaultChecked` are now supported for inputs (**5.6.0**, [Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/defaultChecked), [#14289](https://github.com/sveltejs/svelte/pull/14289)) +- The loose parser mode creates a more modern AST for developer tools to consume (**5.13.0**, [Docs](https://svelte.dev/docs/svelte/svelte-compiler#parse), [#14691](https://github.com/sveltejs/svelte/pull/14691)) +- A new "worker" exports condition helps better support bundling for worker-based environments (**5.15.0**, [#14779](https://github.com/sveltejs/svelte/pull/14779)) + + +_New/Updated Syntax_ + +- `` is a new special element that can capture errors that occur from within its subtree during client rendering (**5.3.0**, [Docs](https://svelte.dev/docs/svelte/svelte-boundary), [#14211](https://github.com/sveltejs/svelte/pull/14211)) +- #each is now supported without `as` (**5.4.0**, [Docs](https://svelte.dev/docs/svelte/each), [#14396](https://github.com/sveltejs/svelte/pull/14396)) +- The new `Spring` and `Tween` classes in `svelte/motion` make it even easier to build custom animation (**5.8.0**, [Docs](https://svelte.dev/docs/svelte/svelte-motion), [#11519](https://github.com/sveltejs/svelte/pull/11519)) +- The new `outro` option in `unmount` will play transitions before the component is removed from the DOM. (**5.13.0**, [Docs](https://svelte.dev/docs/svelte/svelte#unmount), [#14540](https://github.com/sveltejs/svelte/pull/14540)) +- The `$inspect.trace` rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (**5.14.0**, [Docs](https://svelte.dev/docs/svelte/inspect#inspect.trace()), [#14290](https://github.com/sveltejs/svelte/pull/14290)) + + +_Reactivity APIs_ + +- `createSubscriber` creates reactive values that depend on subscriptions (**5.7.0**, [Docs](https://svelte.dev/docs/svelte/svelte-reactivity#createSubscriber), [#14422](https://github.com/sveltejs/svelte/pull/14422)) +- The reactive `MediaQuery` class creates a media query and provides a current property that reflects whether or not it matches (**5.7.0**, [Docs](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery), [#14422](https://github.com/sveltejs/svelte/pull/14422)) +- Getters and setters can now be bound to with `bind` (**5.9.0**, [Docs](https://svelte.dev/docs/svelte/bind), [#14307](https://github.com/sveltejs/svelte/pull/14307)) +- The `svelte/reactivity/window` module exports reactive versions of various `window` values, each of which has a reactive current property that you can reference in reactive contexts (**5.11.0**, [Docs](https://svelte.dev/docs/svelte/svelte-reactivity-window), [#14660](https://github.com/sveltejs/svelte/pull/14660)) + + +## What's new in SvelteKit, Svelte CLI and Language Tools + +- Vite 6 is now supported in SvelteKit - `create` templates in the CLI have been updated to this version (**kit@2.9.0**, **cli@0.6.6** [Docs](https://vite.dev/blog/announcing-vite6), [#12270](https://github.com/sveltejs/kit/pull/12270)) +- The new `init` hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (**2.10.0**, [Docs](https://svelte.dev/docs/kit/hooks#Shared-hooks-init), [#13103](https://github.com/sveltejs/kit/pull/13103)) +- Custom Types are now transported across the server/client boundary (**2.11.0**, [#13149](https://github.com/sveltejs/kit/pull/13149)) +- The new `$app/state` module replaces the existing `$app/stores` module but using Svelte 5 state. The `migrate` tool in the CLI/language tools have been updated to match (**2.12.0**, [Docs](https://svelte.dev/docs/kit/$app-state), [#13140](https://github.com/sveltejs/kit/pull/13140)) +- `bundleStrategy` lets you choose between `'split'`, `'single'` and `'inline'` output options for JS and CSS files (**2.13.0** and **2.15.0**, [Docs](https://svelte.dev/docs/kit/configuration#output), [#13173](https://github.com/sveltejs/kit/pull/13191) and [#13193](https://github.com/sveltejs/kit/pull/13193)) +- The new `sveltekit-adapter` add-on for the Svelte CLI (`sv`) installs and replaces existing SvelteKit adapters ([Docs](https://svelte.dev/docs/cli/sv-add), [#346](https://github.com/sveltejs/cli/pull/346)) +- The language tools extensions will now make use of loose Svelte parser and provide better intellisense (**109.4.0**, [#2631](https://github.com/sveltejs/language-tools/pull/2631)) + + +_Adapter Updates_ + +- `adapter-auto` has added support for the bun language server (**3.3.0**, [#12854](https://github.com/sveltejs/kit/pull/12854)) +- `adapter-cloudflare-workers` now supports `wrangler.json` config files (**2.7.0**, [#13151](https://github.com/sveltejs/kit/pull/13151)) +- `adapter-cloudflare` will now generate an `.assetsignore` file for use with Cloudflare Workers Static Assets (**4.9.0**, [#13109](https://github.com/sveltejs/kit/pull/13109)) + +--- + +## Community Showcase + +### Apps & Sites built with Svelte + +- [Tokeko](https://tokeko.specy.app/) is an educational platform designed to help users understand and learn about different types of parsers, grammar structures, and parsing techniques +- [QuickFlags](https://flags.isaxk.com/) is a fast paced, simple, flag knowledge game +- [Hotspotter](https://github.com/BastiDood/hotspotter) is an incentivized crowdsensing system that collects, maps, and visualizes WiFi and cellular data to pinpoint hotspots and dead zones for the effective visualization of network coverage +- [Writastic](https://writastic.com/) is an AI social media writing assistant to optimize your content with the best strategies of successful creators +- [Walle](https://www.wallestudio.com/) is a macOS chatbot app that lets you interact with Claude, GPT, and Gemini simultaneously +- [Fli.so](https://fli.so/) is a free, modern open-source link shortener +- [VRDB](https://vrdb.app/) is a comprehensive database for Meta Quest Store, App Lab, and VR games +- [sv-resize-image](https://github.com/ssebastianoo/sv-resize-image) resizes images using just the browser +- [WickGPT](https://github.com/stormyzio/wickgpt) is an online tool to generate fake clips of chatGPT responses +- [other.supply](https://other.supply/) is a virtual vinyl shop that simulates the record-flipping experience + + +### Learning Resources + +_Featuring Svelte Contributors and Ambassadors_ + +- [Svelte at Bloomberg (feat Julian Burgess)](https://www.svelteradio.com/episodes/svelte-at-bloomberg) by Svelte Radio +- [Rich Harris' North Star](https://www.youtube.com/watch?v=UegUi2fWBaU) at JSNation US 2024 +- [Perfect Svelte 5 code completion for any LLM - Claude, ChatGPT and GitHub Copilot](https://www.youtube.com/watch?v=tprMklFzy44) by Stanislav Khromov +- [Svelte 5 Is Here!](https://www.youtube.com/watch?v=t6-znHs8DDM) and [View Transitions Are More Powerful Than You Think](https://www.youtube.com/watch?v=jnYjIDKyKHw) by Syntax + + +_This Week in Svelte_ + +- [Ep. 86](https://www.youtube.com/watch?v=VTFAFqd51Fg) β€” Tabs component +- [Ep. 87](https://www.youtube.com/watch?v=TIaUCw4wKio) β€” GPU rendered components with svader +- [Ep. 88](https://www.youtube.com/watch?v=jFyMMu44t-s) β€” Live coding local storage + + +_To Read_ + +- [Building accessible sites with SvelteKit: seven practical tips](https://blog.datawrapper.de/sveltekit-accessibility-tips/) by Antonio Sarcevic +- [How to Fix Unexpected Logout Issues in SvelteKit Caused by data-sveltekit-preload-data](https://blog.yuki-dev.com/blogs/d2_e1zwgn3_o) by Yuki Ishii + + +_To Watch_ + +- [Build & Launch a Svelte Website in Just 15 Minutes!](https://www.youtube.com/watch?v=m9fsj5zXyDY) by NAD LABS +- [The Magic of Svelte](https://www.youtube.com/watch?v=AKZtk0suBTE) by JΓΌrg Hunziker, Vendure Conf 2024 + + +### Libraries, Tools & Components + +- [This site](https://svelte-llm.khromov.se/) provides Svelte 5 and SvelteKit documentation in an LLM-friendly format +- [svelte-mainloop](https://github.com/retrotheft/svelte-mainloop) is awrapper for MainLoop.js that handles function registration and cleanup, and lets you join and leave the loop with a single component ([Reddit](https://www.reddit.com/r/sveltejs/comments/1hfto6y/sveltemainloop_the_easiest_way_to_add_a_loop_to/)) +- [bsky-comments-svelte](https://github.com/nsarrazin/bsky-comments-svelte/) is a simple customizable component to add comments to your website using Bluesky +- [Svelte Mini Router](https://github.com/rodrigocfd/svelte-mini-router) is a declarative, minimal SPA router for Svelte 5, without SvelteKit +- [svelte-firebase-state](https://github.com/pierregoutheraud/svelte-firebase-state) simplifies Firebase integration in Svelte/Sveltekit applications by providing easy-to-use reactive state classes for managing Firestore and Realtime Database data +- [monoco-svelte](https://github.com/monokai/monoco-svelte) lets you create custom (squircle) corners and borders for Svelte components +- [svelte-audio-waveform](https://github.com/Catsvilles/svelte-audio-waveform) transforms an array of peak data into beautifully rendered, customizable waveforms for music players, podcasts, audio editing tools, and more + +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). + +Happy new year! πŸ₯³ From 56546c3ce4d984c1bac85fec5eda14da887d0718 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 23 Dec 2024 11:06:43 -0500 Subject: [PATCH 2/5] make links root-relative --- ...-01-01-whats-new-in-svelte-january-2025.md | 45 ++++++++----------- 1 file changed, 18 insertions(+), 27 deletions(-) diff --git a/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md index e68dc213c5..425219f2eb 100644 --- a/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md +++ b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md @@ -5,46 +5,42 @@ author: Dani Sandoval authorURL: https://dreamindani.com --- -From new syntax to improved dev tooling, the Svelte team has been busy this month building new features in both Svelte and SvelteKit. And as we round the corner into the new year, there's even more to look forward to... like the *10th Svelte Summit*! [Join the Svelte community](https://www.sveltesummit.com/) online or in-person in Barcelona: May 8th and 9th. +From new syntax to improved dev tooling, the Svelte team has been busy this month building new features in both Svelte and SvelteKit. And as we round the corner into the new year, there's even more to look forward to... like the _10th Svelte Summit_! [Join the Svelte community](https://www.sveltesummit.com/) online or in-person in Barcelona: May 8th and 9th. Now let's get to the news πŸ‘€ ## What's new in Svelte -- Snippets can now be exported from module scripts (**5.5.0**, [Docs](https://svelte.dev/docs/svelte/snippet#Exporting-snippets), [#14315](https://github.com/sveltejs/svelte/pull/14315)) +- Snippets can now be exported from module scripts (**5.5.0**, [Docs](/docs/svelte/snippet#Exporting-snippets), [#14315](https://github.com/sveltejs/svelte/pull/14315)) - `defaultValue` and `defaultChecked` are now supported for inputs (**5.6.0**, [Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/defaultChecked), [#14289](https://github.com/sveltejs/svelte/pull/14289)) -- The loose parser mode creates a more modern AST for developer tools to consume (**5.13.0**, [Docs](https://svelte.dev/docs/svelte/svelte-compiler#parse), [#14691](https://github.com/sveltejs/svelte/pull/14691)) +- The loose parser mode creates a more modern AST for developer tools to consume (**5.13.0**, [Docs](/docs/svelte/svelte-compiler#parse), [#14691](https://github.com/sveltejs/svelte/pull/14691)) - A new "worker" exports condition helps better support bundling for worker-based environments (**5.15.0**, [#14779](https://github.com/sveltejs/svelte/pull/14779)) - _New/Updated Syntax_ -- `` is a new special element that can capture errors that occur from within its subtree during client rendering (**5.3.0**, [Docs](https://svelte.dev/docs/svelte/svelte-boundary), [#14211](https://github.com/sveltejs/svelte/pull/14211)) -- #each is now supported without `as` (**5.4.0**, [Docs](https://svelte.dev/docs/svelte/each), [#14396](https://github.com/sveltejs/svelte/pull/14396)) -- The new `Spring` and `Tween` classes in `svelte/motion` make it even easier to build custom animation (**5.8.0**, [Docs](https://svelte.dev/docs/svelte/svelte-motion), [#11519](https://github.com/sveltejs/svelte/pull/11519)) -- The new `outro` option in `unmount` will play transitions before the component is removed from the DOM. (**5.13.0**, [Docs](https://svelte.dev/docs/svelte/svelte#unmount), [#14540](https://github.com/sveltejs/svelte/pull/14540)) -- The `$inspect.trace` rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (**5.14.0**, [Docs](https://svelte.dev/docs/svelte/inspect#inspect.trace()), [#14290](https://github.com/sveltejs/svelte/pull/14290)) - +- `` is a new special element that can capture errors that occur from within its subtree during client rendering (**5.3.0**, [Docs](/docs/svelte/svelte-boundary), [#14211](https://github.com/sveltejs/svelte/pull/14211)) +- #each is now supported without `as` (**5.4.0**, [Docs](/docs/svelte/each), [#14396](https://github.com/sveltejs/svelte/pull/14396)) +- The new `Spring` and `Tween` classes in `svelte/motion` make it even easier to build custom animation (**5.8.0**, [Docs](/docs/svelte/svelte-motion), [#11519](https://github.com/sveltejs/svelte/pull/11519)) +- The new `outro` option in `unmount` will play transitions before the component is removed from the DOM. (**5.13.0**, [Docs](/docs/svelte/svelte#unmount), [#14540](https://github.com/sveltejs/svelte/pull/14540)) +- The `$inspect.trace` rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (**5.14.0**, [Docs](), [#14290](https://github.com/sveltejs/svelte/pull/14290)) _Reactivity APIs_ -- `createSubscriber` creates reactive values that depend on subscriptions (**5.7.0**, [Docs](https://svelte.dev/docs/svelte/svelte-reactivity#createSubscriber), [#14422](https://github.com/sveltejs/svelte/pull/14422)) -- The reactive `MediaQuery` class creates a media query and provides a current property that reflects whether or not it matches (**5.7.0**, [Docs](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery), [#14422](https://github.com/sveltejs/svelte/pull/14422)) -- Getters and setters can now be bound to with `bind` (**5.9.0**, [Docs](https://svelte.dev/docs/svelte/bind), [#14307](https://github.com/sveltejs/svelte/pull/14307)) -- The `svelte/reactivity/window` module exports reactive versions of various `window` values, each of which has a reactive current property that you can reference in reactive contexts (**5.11.0**, [Docs](https://svelte.dev/docs/svelte/svelte-reactivity-window), [#14660](https://github.com/sveltejs/svelte/pull/14660)) - +- `createSubscriber` creates reactive values that depend on subscriptions (**5.7.0**, [Docs](/docs/svelte/svelte-reactivity#createSubscriber), [#14422](https://github.com/sveltejs/svelte/pull/14422)) +- The reactive `MediaQuery` class creates a media query and provides a current property that reflects whether or not it matches (**5.7.0**, [Docs](/docs/svelte/svelte-reactivity#MediaQuery), [#14422](https://github.com/sveltejs/svelte/pull/14422)) +- Getters and setters can now be bound to with `bind` (**5.9.0**, [Docs](/docs/svelte/bind), [#14307](https://github.com/sveltejs/svelte/pull/14307)) +- The `svelte/reactivity/window` module exports reactive versions of various `window` values, each of which has a reactive current property that you can reference in reactive contexts (**5.11.0**, [Docs](/docs/svelte/svelte-reactivity-window), [#14660](https://github.com/sveltejs/svelte/pull/14660)) ## What's new in SvelteKit, Svelte CLI and Language Tools - Vite 6 is now supported in SvelteKit - `create` templates in the CLI have been updated to this version (**kit@2.9.0**, **cli@0.6.6** [Docs](https://vite.dev/blog/announcing-vite6), [#12270](https://github.com/sveltejs/kit/pull/12270)) -- The new `init` hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (**2.10.0**, [Docs](https://svelte.dev/docs/kit/hooks#Shared-hooks-init), [#13103](https://github.com/sveltejs/kit/pull/13103)) +- The new `init` hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (**2.10.0**, [Docs](/docs/kit/hooks#Shared-hooks-init), [#13103](https://github.com/sveltejs/kit/pull/13103)) - Custom Types are now transported across the server/client boundary (**2.11.0**, [#13149](https://github.com/sveltejs/kit/pull/13149)) -- The new `$app/state` module replaces the existing `$app/stores` module but using Svelte 5 state. The `migrate` tool in the CLI/language tools have been updated to match (**2.12.0**, [Docs](https://svelte.dev/docs/kit/$app-state), [#13140](https://github.com/sveltejs/kit/pull/13140)) -- `bundleStrategy` lets you choose between `'split'`, `'single'` and `'inline'` output options for JS and CSS files (**2.13.0** and **2.15.0**, [Docs](https://svelte.dev/docs/kit/configuration#output), [#13173](https://github.com/sveltejs/kit/pull/13191) and [#13193](https://github.com/sveltejs/kit/pull/13193)) -- The new `sveltekit-adapter` add-on for the Svelte CLI (`sv`) installs and replaces existing SvelteKit adapters ([Docs](https://svelte.dev/docs/cli/sv-add), [#346](https://github.com/sveltejs/cli/pull/346)) +- The new `$app/state` module replaces the existing `$app/stores` module but using Svelte 5 state. The `migrate` tool in the CLI/language tools have been updated to match (**2.12.0**, [Docs](/docs/kit/$app-state), [#13140](https://github.com/sveltejs/kit/pull/13140)) +- `bundleStrategy` lets you choose between `'split'`, `'single'` and `'inline'` output options for JS and CSS files (**2.13.0** and **2.15.0**, [Docs](/docs/kit/configuration#output), [#13173](https://github.com/sveltejs/kit/pull/13191) and [#13193](https://github.com/sveltejs/kit/pull/13193)) +- The new `sveltekit-adapter` add-on for the Svelte CLI (`sv`) installs and replaces existing SvelteKit adapters ([Docs](/docs/cli/sv-add), [#346](https://github.com/sveltejs/cli/pull/346)) - The language tools extensions will now make use of loose Svelte parser and provide better intellisense (**109.4.0**, [#2631](https://github.com/sveltejs/language-tools/pull/2631)) - _Adapter Updates_ - `adapter-auto` has added support for the bun language server (**3.3.0**, [#12854](https://github.com/sveltejs/kit/pull/12854)) @@ -68,7 +64,6 @@ _Adapter Updates_ - [WickGPT](https://github.com/stormyzio/wickgpt) is an online tool to generate fake clips of chatGPT responses - [other.supply](https://other.supply/) is a virtual vinyl shop that simulates the record-flipping experience - ### Learning Resources _Featuring Svelte Contributors and Ambassadors_ @@ -78,34 +73,30 @@ _Featuring Svelte Contributors and Ambassadors_ - [Perfect Svelte 5 code completion for any LLM - Claude, ChatGPT and GitHub Copilot](https://www.youtube.com/watch?v=tprMklFzy44) by Stanislav Khromov - [Svelte 5 Is Here!](https://www.youtube.com/watch?v=t6-znHs8DDM) and [View Transitions Are More Powerful Than You Think](https://www.youtube.com/watch?v=jnYjIDKyKHw) by Syntax - _This Week in Svelte_ - [Ep. 86](https://www.youtube.com/watch?v=VTFAFqd51Fg) β€” Tabs component - [Ep. 87](https://www.youtube.com/watch?v=TIaUCw4wKio) β€” GPU rendered components with svader - [Ep. 88](https://www.youtube.com/watch?v=jFyMMu44t-s) β€” Live coding local storage - _To Read_ - [Building accessible sites with SvelteKit: seven practical tips](https://blog.datawrapper.de/sveltekit-accessibility-tips/) by Antonio Sarcevic - [How to Fix Unexpected Logout Issues in SvelteKit Caused by data-sveltekit-preload-data](https://blog.yuki-dev.com/blogs/d2_e1zwgn3_o) by Yuki Ishii - _To Watch_ - [Build & Launch a Svelte Website in Just 15 Minutes!](https://www.youtube.com/watch?v=m9fsj5zXyDY) by NAD LABS - [The Magic of Svelte](https://www.youtube.com/watch?v=AKZtk0suBTE) by JΓΌrg Hunziker, Vendure Conf 2024 - ### Libraries, Tools & Components - [This site](https://svelte-llm.khromov.se/) provides Svelte 5 and SvelteKit documentation in an LLM-friendly format - [svelte-mainloop](https://github.com/retrotheft/svelte-mainloop) is awrapper for MainLoop.js that handles function registration and cleanup, and lets you join and leave the loop with a single component ([Reddit](https://www.reddit.com/r/sveltejs/comments/1hfto6y/sveltemainloop_the_easiest_way_to_add_a_loop_to/)) - [bsky-comments-svelte](https://github.com/nsarrazin/bsky-comments-svelte/) is a simple customizable component to add comments to your website using Bluesky -- [Svelte Mini Router](https://github.com/rodrigocfd/svelte-mini-router) is a declarative, minimal SPA router for Svelte 5, without SvelteKit +- [Svelte Mini Router](https://github.com/rodrigocfd/svelte-mini-router) is a declarative, minimal SPA router for Svelte 5, without SvelteKit - [svelte-firebase-state](https://github.com/pierregoutheraud/svelte-firebase-state) simplifies Firebase integration in Svelte/Sveltekit applications by providing easy-to-use reactive state classes for managing Firestore and Realtime Database data -- [monoco-svelte](https://github.com/monokai/monoco-svelte) lets you create custom (squircle) corners and borders for Svelte components +- [monoco-svelte](https://github.com/monokai/monoco-svelte) lets you create custom (squircle) corners and borders for Svelte components - [svelte-audio-waveform](https://github.com/Catsvilles/svelte-audio-waveform) transforms an array of peak data into beautifully rendered, customizable waveforms for music players, podcasts, audio editing tools, and more 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). From 0eb5c289dc49e3cc6436f3e86b09872839d58121 Mon Sep 17 00:00:00 2001 From: Dani Sandoval Date: Tue, 31 Dec 2024 22:53:52 -0700 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: Rich Harris Co-authored-by: Willow (GHOST) --- .../blog/2025-01-01-whats-new-in-svelte-january-2025.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md index 425219f2eb..55f6ed2b6f 100644 --- a/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md +++ b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md @@ -1,6 +1,6 @@ --- title: "What's new in Svelte: January 2025" -description: 'Svelte 5 just keeps getting better. Plus, and in-person Svelte Summit!' +description: 'Svelte 5 just keeps getting better. Plus, an in-person Svelte Summit!' author: Dani Sandoval authorURL: https://dreamindani.com --- @@ -35,7 +35,7 @@ _Reactivity APIs_ - Vite 6 is now supported in SvelteKit - `create` templates in the CLI have been updated to this version (**kit@2.9.0**, **cli@0.6.6** [Docs](https://vite.dev/blog/announcing-vite6), [#12270](https://github.com/sveltejs/kit/pull/12270)) - The new `init` hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (**2.10.0**, [Docs](/docs/kit/hooks#Shared-hooks-init), [#13103](https://github.com/sveltejs/kit/pull/13103)) -- Custom Types are now transported across the server/client boundary (**2.11.0**, [#13149](https://github.com/sveltejs/kit/pull/13149)) +- The new [`transport`](https://svelte.dev/docs/kit/@sveltejs-kit#Transport) hook allows you to encode/serialize and decode/deserialize custom non-POJOs across the server/client boundary (**2.11.0**, [#13149](https://github.com/sveltejs/kit/pull/13149)) - The new `$app/state` module replaces the existing `$app/stores` module but using Svelte 5 state. The `migrate` tool in the CLI/language tools have been updated to match (**2.12.0**, [Docs](/docs/kit/$app-state), [#13140](https://github.com/sveltejs/kit/pull/13140)) - `bundleStrategy` lets you choose between `'split'`, `'single'` and `'inline'` output options for JS and CSS files (**2.13.0** and **2.15.0**, [Docs](/docs/kit/configuration#output), [#13173](https://github.com/sveltejs/kit/pull/13191) and [#13193](https://github.com/sveltejs/kit/pull/13193)) - The new `sveltekit-adapter` add-on for the Svelte CLI (`sv`) installs and replaces existing SvelteKit adapters ([Docs](/docs/cli/sv-add), [#346](https://github.com/sveltejs/cli/pull/346)) From 38a3eb1227742138646f33758307f9be1ca77181 Mon Sep 17 00:00:00 2001 From: Dani Sandoval Date: Tue, 31 Dec 2024 23:02:59 -0700 Subject: [PATCH 4/5] last updates before the new year! --- .../blog/2025-01-01-whats-new-in-svelte-january-2025.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md index 55f6ed2b6f..ed15708b79 100644 --- a/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md +++ b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md @@ -15,6 +15,7 @@ Now let's get to the news πŸ‘€ - `defaultValue` and `defaultChecked` are now supported for inputs (**5.6.0**, [Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/defaultChecked), [#14289](https://github.com/sveltejs/svelte/pull/14289)) - The loose parser mode creates a more modern AST for developer tools to consume (**5.13.0**, [Docs](/docs/svelte/svelte-compiler#parse), [#14691](https://github.com/sveltejs/svelte/pull/14691)) - A new "worker" exports condition helps better support bundling for worker-based environments (**5.15.0**, [#14779](https://github.com/sveltejs/svelte/pull/14779)) +- The `class` attribute can now be an object or array, using `clsx` (**5.16.0**, [Docs](https://svelte.dev/docs/svelte/class#Attributes-Objects-and-arrays), [#14714](https://github.com/sveltejs/svelte/pull/14714)) _New/Updated Syntax_ @@ -33,7 +34,6 @@ _Reactivity APIs_ ## What's new in SvelteKit, Svelte CLI and Language Tools -- Vite 6 is now supported in SvelteKit - `create` templates in the CLI have been updated to this version (**kit@2.9.0**, **cli@0.6.6** [Docs](https://vite.dev/blog/announcing-vite6), [#12270](https://github.com/sveltejs/kit/pull/12270)) - The new `init` hook runs once, when the server is created or the app starts in the browser, and is a useful place to do asynchronous work such as initializing a database connection (**2.10.0**, [Docs](/docs/kit/hooks#Shared-hooks-init), [#13103](https://github.com/sveltejs/kit/pull/13103)) - The new [`transport`](https://svelte.dev/docs/kit/@sveltejs-kit#Transport) hook allows you to encode/serialize and decode/deserialize custom non-POJOs across the server/client boundary (**2.11.0**, [#13149](https://github.com/sveltejs/kit/pull/13149)) - The new `$app/state` module replaces the existing `$app/stores` module but using Svelte 5 state. The `migrate` tool in the CLI/language tools have been updated to match (**2.12.0**, [Docs](/docs/kit/$app-state), [#13140](https://github.com/sveltejs/kit/pull/13140)) @@ -68,7 +68,7 @@ _Adapter Updates_ _Featuring Svelte Contributors and Ambassadors_ -- [Svelte at Bloomberg (feat Julian Burgess)](https://www.svelteradio.com/episodes/svelte-at-bloomberg) by Svelte Radio +- [Svelte at Bloomberg (feat Julian Burgess)](https://www.svelteradio.com/episodes/svelte-at-bloomberg) and [Scott Tolinski on Svelte 5 Local First Development](https://www.svelteradio.com/episodes/scott-tolinski-on-svelte-5-local-first-development) by Svelte Radio - [Rich Harris' North Star](https://www.youtube.com/watch?v=UegUi2fWBaU) at JSNation US 2024 - [Perfect Svelte 5 code completion for any LLM - Claude, ChatGPT and GitHub Copilot](https://www.youtube.com/watch?v=tprMklFzy44) by Stanislav Khromov - [Svelte 5 Is Here!](https://www.youtube.com/watch?v=t6-znHs8DDM) and [View Transitions Are More Powerful Than You Think](https://www.youtube.com/watch?v=jnYjIDKyKHw) by Syntax @@ -83,6 +83,7 @@ _To Read_ - [Building accessible sites with SvelteKit: seven practical tips](https://blog.datawrapper.de/sveltekit-accessibility-tips/) by Antonio Sarcevic - [How to Fix Unexpected Logout Issues in SvelteKit Caused by data-sveltekit-preload-data](https://blog.yuki-dev.com/blogs/d2_e1zwgn3_o) by Yuki Ishii +- [Svelte Job's Svelte Salaries Report](https://sveltejobs.com/svelte-salaries) shows average and median salaries across remote, non-remote positions, locations, and seniority levels _To Watch_ @@ -91,13 +92,14 @@ _To Watch_ ### Libraries, Tools & Components -- [This site](https://svelte-llm.khromov.se/) provides Svelte 5 and SvelteKit documentation in an LLM-friendly format +- [The Svelte docs](https://svelte.dev/content.json) are now available in an LLM-friendly format (shout out to Stanislav Khromov for [svelte-llm](https://svelte-llm.khromov.se/)) - [svelte-mainloop](https://github.com/retrotheft/svelte-mainloop) is awrapper for MainLoop.js that handles function registration and cleanup, and lets you join and leave the loop with a single component ([Reddit](https://www.reddit.com/r/sveltejs/comments/1hfto6y/sveltemainloop_the_easiest_way_to_add_a_loop_to/)) - [bsky-comments-svelte](https://github.com/nsarrazin/bsky-comments-svelte/) is a simple customizable component to add comments to your website using Bluesky - [Svelte Mini Router](https://github.com/rodrigocfd/svelte-mini-router) is a declarative, minimal SPA router for Svelte 5, without SvelteKit - [svelte-firebase-state](https://github.com/pierregoutheraud/svelte-firebase-state) simplifies Firebase integration in Svelte/Sveltekit applications by providing easy-to-use reactive state classes for managing Firestore and Realtime Database data - [monoco-svelte](https://github.com/monokai/monoco-svelte) lets you create custom (squircle) corners and borders for Svelte components - [svelte-audio-waveform](https://github.com/Catsvilles/svelte-audio-waveform) transforms an array of peak data into beautifully rendered, customizable waveforms for music players, podcasts, audio editing tools, and more +- [Svader](https://github.com/sockmaster27/svader) creates GPU-rendered Svelte components with WebGL and WebGPU fragment shaders 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). From 5f15d6bfc92b31fc9d31795074b10c84e62ba394 Mon Sep 17 00:00:00 2001 From: "Willow (GHOST)" Date: Wed, 1 Jan 2025 11:59:20 +0000 Subject: [PATCH 5/5] Update apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md --- .../content/blog/2025-01-01-whats-new-in-svelte-january-2025.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md index ed15708b79..7ef10cb23b 100644 --- a/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md +++ b/apps/svelte.dev/content/blog/2025-01-01-whats-new-in-svelte-january-2025.md @@ -23,7 +23,7 @@ _New/Updated Syntax_ - #each is now supported without `as` (**5.4.0**, [Docs](/docs/svelte/each), [#14396](https://github.com/sveltejs/svelte/pull/14396)) - The new `Spring` and `Tween` classes in `svelte/motion` make it even easier to build custom animation (**5.8.0**, [Docs](/docs/svelte/svelte-motion), [#11519](https://github.com/sveltejs/svelte/pull/11519)) - The new `outro` option in `unmount` will play transitions before the component is removed from the DOM. (**5.13.0**, [Docs](/docs/svelte/svelte#unmount), [#14540](https://github.com/sveltejs/svelte/pull/14540)) -- The `$inspect.trace` rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (**5.14.0**, [Docs](), [#14290](https://github.com/sveltejs/svelte/pull/14290)) +- The `$inspect.trace` rune causes the surrounding function to be traced in development. Any time the function re-runs as part of an effect or a derived, information will be printed to the console about which pieces of reactive state caused the effect to fire (**5.14.0**, [Docs](), [#14290](https://github.com/sveltejs/svelte/pull/14290)) _Reactivity APIs_