Merge branch 'main' into fix-as-such

Author: teemingc

apps/svelte.dev/content/blog/2025-08-01-whats-new-in-svelte-august-2025.md

@@ -0,0 +1,88 @@
+---
+title: "What's new in Svelte: August 2025"
+description: 'Async Svelte is out - with all the fixins'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+With [Async Svelte](https://github.com/sveltejs/svelte/discussions/15845) and its companion [Remote Functions](https://github.com/sveltejs/kit/discussions/13897) officially out in the world, there's a lot of updates to share!
+
+Be sure to check out the showcase for videos from Rich, Paolo, and Stanislav about all the brand new features in Svelte.
+
+Let's dive into the highlights...
+
+## What's new in Svelte, SvelteKit, Language Tools and CLI (sv)
+
+- Remote functions can be called anywhere in your app, but always run on the server, and as such can safely access server-only modules containing things like environment variables and database clients (**[email protected]**, [Docs](https://svelte.dev/docs/kit/remote-functions), [#13986](https://github.com/sveltejs/kit/pull/13986))
+- `getAbortSignal` returns an `AbortSignal` that aborts when the current derived or effect re-runs or is destroyed (**[email protected]**, [Docs](https://svelte.dev/docs/svelte/svelte#getAbortSignal), [#16266](https://github.com/sveltejs/svelte/pull/16266))
+- A new `parent` property has been added to the `__svelte_meta` properties that are added to elements at dev time - useful for debugging nested hierarchies (**[email protected]**, [#16255](https://github.com/sveltejs/svelte/pull/16255))
+- `await` is now supported in components when using the `experimental.async` compiler option (**[email protected]/[email protected]**, [Docs](https://svelte.dev/docs/svelte/await-expressions), [#15844](https://github.com/sveltejs/svelte/pull/15844))
+- There are now types for the `params` prop and `page` attributes in page/layout components (**[email protected], [email protected] & [email protected]**, [#13999](https://github.com/sveltejs/kit/pull/13999) / [#13864](https://github.com/sveltejs/kit/pull/13864))
+- SvelteKit's `read` now works in edge environments where `fs.readFile` isn't available such as in Cloudflare's workers, Netlify, and Vercel's edge functions (**[email protected]**, [#13859](https://github.com/sveltejs/kit/pull/13859))
+- The `resolve(...)` and `asset(...)` helpers have been added for resolving paths (**[email protected]**, [#13864](https://github.com/sveltejs/kit/pull/13864))
+- Support for modern SvelteKit prop typings has been added to VS Code snippets (**extensions-109.10.0**, [#2796](https://github.com/sveltejs/language-tools/pull/2796))
+- The new `vite.addPlugin` simplifies adding a plugin on various vite config styles (**[email protected]**, [#633](https://github.com/sveltejs/cli/pull/633))
+- vite-plugin-svelte is out with support for vite7, rolldown-vite and [more](https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md)
+
+For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs [here](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and [here](https://github.com/sveltejs/kit/tree/main/packages).
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [Logitech's new site](https://www.reddit.com/r/sveltejs/comments/1m991ts/the_logitech_site_is_built_with_svelte/) is built in Svelte 🎉
+- [hend.world](https://hend.world/) is a language learning application that surrounds you with comprehensible input: compelling stories, articles, and videos that match your level
+- [Amgiflol](https://github.com/sm17p/amgiflol) is a Figma-like Layout Inspector For Web
+- [Formcord](https://formcord.app/) is a Google Forms alternative built specifically for Discord communities
+- [Freq](https://www.freq.social/) is a community-based social media platform for groups of music listeners to share, talk about, and enjoy music together
+- [Salora](https://salora.app/) is a salon booking application (de)
+- [Animal Well Shrine](https://anxpara.com/animalwellshrine) is an low-spoiler egg tracker for the video game, Animal Well
+- [TypingGym](https://www.typinggym.com/) is a typing practice site with automatic difficulty adjustment
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [promise.then(...)](https://www.youtube.com/watch?v=e-1pVKUWlOQ) by Rich Harris - what's next now that Svelte is Async
+- [Asynchronous Svelte](https://www.youtube.com/live/kL4Tp8RmJwo) with Rich Harris by CodeTV (Jason Lengstorf)
+- [Remote Functions are coming to SvelteKit - and they are amazing!](https://www.youtube.com/watch?v=BID8r5LObvI) by Code with Stanislav
+- [Svelte London - June 2025](https://www.youtube.com/watch?v=LKSmlp2S-jQ) feat. "Svelte, svelte everywhere" by Paolo Ricciuti and "Testing your Svelte app in an actual browser" by Willow / Scott
+
+_This Week in Svelte_
+
+- [Ep. 108](https://www.youtube.com/watch?v=Sp4Y1tMo5AQ) — Svelte Flow
+- [Ep. 109](https://www.youtube.com/watch?v=LghoZmFzWYM) — Ark UI
+- [Ep. 110](https://www.youtube.com/watch?v=Ia8N6S2OkpM) — Neodrag v3
+- [Ep. 111](https://www.youtube.com/watch?v=fExlOwTtZqM) — Best LLMs for Svelte 5 tested, MCP server, llms.txt
+
+_Svienna (Svelte Society Vienna)_
+
+- [Lightning talk 10 tips in 5 mins!](https://www.youtube.com/watch?v=hptgxIdnDdg) by Jean Yves Couet
+- [Using SvelteKit and MIT appinventor to inspire young girls for tech](https://www.youtube.com/watch?v=pDx1a078in8) by Domenik Reitzner
+- [Adding full to your full stack SvelteKit app](https://www.youtube.com/watch?v=A3cqzv-zRe8) by Jean Yves Couet
+- [ZeeltePHP (Svelte + PHP)](https://www.youtube.com/watch?v=0sm4oPwvPVU) by derharry
+- [Svelte at Geizhals](https://www.youtube.com/watch?v=aJVdfPk9WmI) by Martin Grubinger
+
+_To Watch/Read_
+
+- [Build a SvelteKit Admin App with Drizzle, Tailwind & Postgres](https://www.youtube.com/watch?v=H3Mk6ozq69U) by Tyler Codes
+- [Master Svelte in 15 Minutes: From React Dev to Svelte Pro](https://www.youtube.com/watch?v=Vhfcgnt5nO8) by Neuronfire
+- [Simple but Effective Skeleton Loaders](https://www.matsimon.dev/blog/simple-skeleton-loaders) by Mat Simon
+- [Building Smart Intervals with Svelte 5](https://www.puruvj.dev/blog/svelte-5-interval-rune) by Puru VJ
+
+### Libraries, Tools & Components
+
+- [Svelte Interval](https://github.com/PuruVJ/svelte-interval) is a comprehensive Svelte utility package for managing intervals with reactive durations, synchronization, and advanced control features
+- [@hvniel/svelte-router](https://github.com/HanielU/svelte-router) is a Svelte 5 port of React Router
+- [@hvniel/vite-plugin-svelte-inline-component](https://github.com/hanielu/vite-plugin-svelte-inline-component) lets you write tiny Svelte components straight inside your JavaScript / TypeScript tests using tagged‑template literals
+- [wuchale](https://github.com/wuchalejs/wuchale) is a non-invasive, normal code based compile-time internationalization (i18n) toolkit
+- [SSGOI](https://github.com/meursyphus/ssgoi) brings native app-like page transitions to the web
+- [Svelte Form Builder](https://github.com/moalamri/svelte-form-builder) is a modern, drag-and-drop form builder built with Svelte 5
+- [Svelte persistent runes](https://github.com/MacFJA/svelte-persistent-runes?tab=readme-ov-file#svelte-persistent-runes) provides a Svelte reactive rune that keep its value through pages and reloads
+- [gositemap](https://github.com/lelabdev/gositemap) is a fast, test-driven sitemap.xml generator for static SvelteKit sites
+
+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).
+
+Until next time 👋🏼!

apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md

@@ -20,7 +20,7 @@ You can select multiple space-separated add-ons from [the list below](#Official-
 ## Options
 
 - `-C`, `--cwd` — path to the root of your Svelte(Kit) project
-- `--no-preconditions` — skip checking preconditions <!-- TODO what does this mean? -->
+- `--no-git-check` — even if some files are dirty, no prompt will be shown
 - `--install` — installs dependencies with a specified package manager
 - `--no-install` — prevents installing dependencies
 

apps/svelte.dev/content/docs/kit/10-getting-started/20-creating-a-project.md

@@ -8,11 +8,10 @@ The easiest way to start building a SvelteKit app is to run `npx sv create`:
 ```sh
 npx sv create my-app
 cd my-app
-npm install
 npm run dev
 ```
 
-The first command will scaffold a new project in the `my-app` directory asking you if you'd like to set up some basic tooling such as TypeScript. See [integrations](./integrations) for pointers on setting up additional tooling. The subsequent commands will then install its dependencies and start a server on [localhost:5173](http://localhost:5173).
+The first command will scaffold a new project in the `my-app` directory asking if you'd like to set up some basic tooling such as TypeScript. See [the CLI docs](/docs/cli/overview) for information about these options and [the integrations page](./integrations) for pointers on setting up additional tooling. `npm run dev` will then start the development server on [localhost:5173](http://localhost:5173) - make sure you install dependencies before running this if you didn't do so during project creation.
 
 There are two basic concepts:
 

apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md

@@ -189,7 +189,7 @@ Conceptually, they're the same thing, but there are some important differences t
 
 Server `load` functions _always_ run on the server.
 
-By default, universal `load` functions run on the server during SSR when the user first visits your page. They will then run again during hydration, reusing any responses from [fetch requests](#Making-fetch-requests). All subsequent invocations of universal `load` functions happen in the browser. You can customize the behavior through [page options](page-options). If you disable [server side rendering](page-options#ssr), you'll get an SPA and universal `load` functions _always_ run on the client.
+By default, universal `load` functions run on the server during SSR when the user first visits your page. They will then run again during hydration, reusing any responses from [fetch requests](#Making-fetch-requests). All subsequent invocations of universal `load` functions happen in the browser. You can customize the behavior through [page options](page-options). If you disable [server-side rendering](page-options#ssr), you'll get an SPA and universal `load` functions _always_ run on the client.
 
 If a route contains both universal and server `load` functions, the server `load` runs first.
 

apps/svelte.dev/content/docs/kit/20-core-concepts/60-remote-functions.md

@@ -7,7 +7,7 @@ title: Remote functions
 	<p>Available since 2.27</p>
 </blockquote>
 
-Remote functions are a tool for type-safe communication between client and server. They can be _called_ anywhere in your app, but always _run_ on the server, and as such can safely access [server-only modules](server-only-modules) containing things like environment variables and database clients.
+Remote functions are a tool for type-safe communication between client and server. They can be _called_ anywhere in your app, but always _run_ on the server, meaning they can safely access [server-only modules](server-only-modules) containing things like environment variables and database clients.
 
 Combined with Svelte's experimental support for [`await`](/docs/svelte/await-expressions), it allows you to load and manipulate data directly inside your components.
 
@@ -26,7 +26,7 @@ export default {
 
 ## Overview
 
-Remote functions are exported from a `.remote.js` or `.remote.ts` file, and come in four flavours: `query`, `form`, `command` and `prerender`. On the client, the exported functions are transformed to `fetch` wrappers that invoke their counterparts on the server via a generated HTTP endpoint.
+Remote functions are exported from a `.remote.js` or `.remote.ts` file, and come in four flavours: `query`, `form`, `command` and `prerender`. On the client, the exported functions are transformed to `fetch` wrappers that invoke their counterparts on the server via a generated HTTP endpoint. Remote files must be placed in the `lib` or `routes` directory.
 
 ## query
 
@@ -114,7 +114,7 @@ Query functions can accept an argument, such as the `slug` of an individual post
 
 	let { params } = $props();
 
-	const post = getPost(params.slug);
+	const post = $derived(await getPost(params.slug));
 </script>
 
 <h1>{post.title}</h1>
@@ -161,7 +161,7 @@ Any query can be updated via its `refresh` method:
 </button>
 ```
 
-> [!NOTE] Queries are cached while they're on the page, meaning `getPosts() === getPosts()`. As such, you don't need a reference like `const posts = getPosts()` in order to refresh the query.
+> [!NOTE] Queries are cached while they're on the page, meaning `getPosts() === getPosts()`. This means you don't need a reference like `const posts = getPosts()` in order to refresh the query.
 
 ## form
 
@@ -271,7 +271,7 @@ export const createPost = form(async (data) => {
 
 	// Refresh `getPosts()` on the server, and send
 	// the data back with the result of `createPost`
-	+++getPosts().refresh();+++
+	+++await getPosts().refresh();+++
 
 	// Redirect to the newly created page
 	redirect(303, `/blog/${slug}`);
@@ -657,7 +657,7 @@ export const getPost = prerender(
 );
 ```
 
-> [!NOTE] Svelte does not yet support asynchronous server-side rendering, and as such it's likely that you're only calling remote functions from the browser, rather than during prerendering. Because of this you will need to use `inputs`, for now. We're actively working on this roadblock.
+> [!NOTE] Svelte does not yet support asynchronous server-side rendering, so it's likely that you're only calling remote functions from the browser, rather than during prerendering. Because of this, you will need to use `inputs`, for now. We're actively working on this roadblock.
 
 By default, prerender functions are excluded from your server bundle, which means that you cannot call them with any arguments that were _not_ prerendered. You can set `dynamic: true` to change this behaviour:
 

apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md

@@ -185,7 +185,11 @@ When deploying your application, the server generated by SvelteKit is bundled in
 
 ### Accessing the file system
 
-You can't use `fs` in Cloudflare Workers — you must [prerender](page-options#prerender) the routes in question.
+You can't use `fs` in Cloudflare Workers.
+
+Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It works by fetching the file from the deployed public assets location.
+
+Alternatively, you can [prerender](page-options#prerender) the routes in question.
 
 ## Migrating from Workers Sites
 

apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md

@@ -118,6 +118,6 @@ Additionally, you can add your own Netlify functions by creating a directory for
 
 You can't use `fs` in edge deployments.
 
-You _can_ use it in serverless deployments, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. `read` does not work inside edge deployments (this may change in future).
+You _can_ use it in serverless deployments, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It also works inside edge deployments by fetching the file from the deployed public assets location.
 
 Alternatively, you can [prerender](page-options#prerender) the routes in question.

apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md

@@ -195,6 +195,6 @@ Projects created before a certain date may default to using an older Node versio
 
 You can't use `fs` in edge functions.
 
-You _can_ use it in serverless functions, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. `read` does not work inside routes deployed as edge functions (this may change in future).
+You _can_ use it in serverless functions, but it won't work as expected, since files are not copied from your project into your deployment. Instead, use the [`read`]($app-server#read) function from `$app/server` to access your files. It also works inside routes deployed as edge functions by fetching the file from the deployed public assets location.
 
 Alternatively, you can [prerender](page-options#prerender) the routes in question.

apps/svelte.dev/content/docs/kit/30-advanced/40-service-workers.md

@@ -127,15 +127,15 @@ navigator.serviceWorker.register('/service-worker.js', {
 
 Setting up proper types for service workers requires some manual setup. Inside your `service-worker.js`, add the following to the top of your file:
 
-```original-js
+```js
 /// <reference types="@sveltejs/kit" />
 /// <reference no-default-lib="true"/>
 /// <reference lib="esnext" />
 /// <reference lib="webworker" />
 
 const sw = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (self));
 ```
-```generated-ts
+```ts
 /// <reference types="@sveltejs/kit" />
 /// <reference no-default-lib="true"/>
 /// <reference lib="esnext" />

apps/svelte.dev/content/docs/kit/60-appendix/30-migrating-to-sveltekit-2.md

@@ -91,7 +91,7 @@ This inconsistency is fixed in version 2. Paths are either always relative or al
 
 ## Server fetches are not trackable anymore
 
-Previously it was possible to track URLs from `fetch`es on the server in order to rerun load functions. This poses a possible security risk (private URLs leaking), and as such it was behind the `dangerZone.trackServerFetches` setting, which is now removed.
+Previously it was possible to track URLs from `fetch`es on the server in order to rerun load functions. This poses a possible security risk (private URLs leaking), and for this reason it was behind the `dangerZone.trackServerFetches` setting, which is now removed.
 
 ## `preloadCode` arguments must be prefixed with `base`
 
@@ -105,7 +105,7 @@ Additionally, `preloadCode` now takes a single argument rather than _n_ argument
 
 SvelteKit 1 included a function called `resolvePath` which allows you to resolve a route ID (like `/blog/[slug]`) and a set of parameters (like `{ slug: 'hello' }`) to a pathname. Unfortunately the return value didn't include the `base` path, limiting its usefulness in cases where `base` was set.
 
-As such, SvelteKit 2 replaces `resolvePath` with a (slightly better named) function called `resolveRoute`, which is imported from `$app/paths` and which takes `base` into account.
+For this reason, SvelteKit 2 replaces `resolvePath` with a (slightly better named) function called `resolveRoute`, which is imported from `$app/paths` and which takes `base` into account.
 
 ```js
 ---import { resolvePath } from '@sveltejs/kit';
@@ -128,7 +128,7 @@ SvelteKit 2 cleans this up by calling `handleError` hooks with two new propertie
 
 The `$env/dynamic/public` and `$env/dynamic/private` modules provide access to _run time_ environment variables, as opposed to the _build time_ environment variables exposed by `$env/static/public` and `$env/static/private`.
 
-During prerendering in SvelteKit 1, they are one and the same. As such, prerendered pages that make use of 'dynamic' environment variables are really 'baking in' build time values, which is incorrect. Worse, `$env/dynamic/public` is populated in the browser with these stale values if the user happens to land on a prerendered page before navigating to dynamically-rendered pages.
+During prerendering in SvelteKit 1, they are one and the same. This means that prerendered pages that make use of 'dynamic' environment variables are really 'baking in' build time values, which is incorrect. Worse, `$env/dynamic/public` is populated in the browser with these stale values if the user happens to land on a prerendered page before navigating to dynamically-rendered pages.
 
 Because of this, dynamic environment variables can no longer be read during prerendering in SvelteKit 2 — you should use the `static` modules instead. If the user lands on a prerendered page, SvelteKit will request up-to-date values for `$env/dynamic/public` from the server (by default from a module called `/_app/env.js`) instead of reading them from the server-rendered HTML.