Merge branch 'main' into fix-spelling

Author: teemingc

apps/svelte.dev/content/blog/2025-07-01-whats-new-in-svelte-july-2025.md

@@ -0,0 +1,77 @@
+---
+title: "What's new in Svelte: July 2025"
+description: 'Vite 7 and Rolldown support, better traces and vitest browser mode support'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+Whether you're trying out Vite 7, vitest browser mode or [remote functions](https://github.com/sveltejs/kit/discussions/13897), there's lots of experimental features to try this month.
+
+Want some Svelte swag while you're chatting on Discord? With the new `sv ⚡` [server tag](https://support.discord.com/hc/en-us/articles/31444248479639-Server-Tags#h_01JT6VKRACHQADX7EBXR84QTAQ), you do just that. While signed into Discord, you can adopt our tag via profile settings.
+
+There's a bunch to cover, from blog posts to new libraries, so let's dive in...
+
+## What's new in Svelte and SvelteKit
+
+- `$inspect.trace` now includes source name logging to make it easy to find which file the log came from (**[email protected]**, [Docs](<https://svelte.dev/docs/svelte/$inspect#$inspect.trace()>), #[16060](https://github.com/sveltejs/svelte/pull/16060))
+- The latest version of SvelteKit now supports Vite 7 and Rolldown. Compilation should be faster using Rolldown, but with larger bundle sizes until additional tree-shaking is implemented in Rolldown (**[email protected]**, [Docs](https://vite.dev/guide/rolldown.html#how-to-try-rolldown), [#13747](https://github.com/sveltejs/kit/pull/13747))
+
+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).
+
+## What's new in the CLI and Language Tools
+
+- The `sv` CLI now supports Vite's browser mode in Vitest - allowing you to run your tests in the browser natively (**[email protected]**, [Docs](https://vitest.dev/guide/browser/), [#588](https://github.com/sveltejs/cli/pull/588))
+- The language server now makes it easier to search for symbol names (`Ctrl + T` in VSCode). Some of the handling is also synced to the Svelte TypeScript plugin so that it's more consistent, which also means vscode can better deduplicate the results from both tsserver and Svelte language server (**[email protected]**, [#2769](https://github.com/sveltejs/language-tools/pull/2769))
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [Planet Poster](https://planet-poster.vercel.app/) is an interactive art work inspired by a poster of, you guessed it, planets
+- [roomy-worlds](https://flo-bit.dev/roomy-worlds/) lets you create small 3d worlds and share/edit with your community
+- [Prodcast](https://www.prodcastapp.com/) lets you discover products curated from your favorite podcasts
+- [Distill](https://www.distillintelligence.com/) automates company and industry monitoring with all news, updates, and summarized insights in one place
+- [thom.chat](https://github.com/tglide/thom-chat) is an open-source alternative/clone to T3 Chat
+- [Visual Source](https://github.com/jhwz/visual-source) is a GUI for managing your projects design tokens
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [Type-Safe Persistence and Auto-Theming in Svelte 5](https://www.puruvj.dev/blog/svelte-5-runic-persist-theming) by Puru VJ
+- [$effect is fine but proxies are better](https://ricciuti.me/blog/effect-is-fine-but-proxies-are-better) and [How to build Web Components with Svelte](https://mainmatter.com/blog/2025/06/25/web-components-with-svelte/?utm_source=svelte_newsletter&utm_medium=social&utm_campaign=25-06-26-how-to-build-web-components-with-svelte) by Paolo Ricciuti
+
+_This Week in Svelte_
+
+- [Ep. 106](https://www.youtube.com/watch?v=_7_8HKvee8M) — Changelog
+- [Ep. 107](https://www.youtube.com/watch?v=Ijb8l9XEz2g) — svelte-lexical
+
+_To Watch/Read_
+
+- [Sveltest](https://sveltest.dev/docs/getting-started) is a guide to set up testing for Svelte 5 applications using the experimental vitest-browser-svelte library
+- [A Playful Onboarding: Your first interactive animation from A to Z](https://director.design/chapters/playful-onboarding) by Director.design
+- [Migrating from @testing-library/svelte to vitest-browser-svelte](https://scottspence.com/posts/migrating-from-testing-library-svelte-to-vitest-browser-svelte) by Scott Spence
+- [Why Silicon Valley CTOs Are Secretly Moving Away from React](https://freedium.cfd/https://javascript.plainenglish.io/why-silicon-valley-ctos-are-secretly-moving-away-from-react-bdf64f0b6072) by Freedium
+- [Async Local Storage](https://blog.robino.dev/posts/async-local-storage) by Ross Robino
+- [Mainmatter](https://mainmatter.com/events/?utm_source=svelte_newsletter&utm_medium=social&utm_campaign=25-06-25-how-to-build-web-components-with-svelte) has a bunch of Svelte workshops in July so be sure to check those out!
+
+### Libraries, Tools & Components
+
+- [shadcn-svelte v1](https://shadcn-svelte.com/) - after 11 months in pre-release (@next), shadcn-svelte has officially hit v1.0. Congrats!
+- [Quaff](https://github.com/quaffui/quaff) is a component library for Svelte that follows the Material Design 3 guidelines
+- [Neodrag v3](https://www.puruvj.dev/blog/neodrag-v3-alpha) Alpha is out with multi-framework adapters, event delegation and more
+- [Svelte Polaris](https://svelte-polaris-docs.storebud.workers.dev/) is port of Shopify's design system to build Shopify apps
+- [Origin UI](https://originui-svelte.pages.dev/) is a collection of copy-and-paste components for quickly build application UIs
+- [Svelte 5 MCP Server](https://github.com/StudentOfJS/svelte5-mcp) is a specialized Model Context Protocol (MCP) server for Svelte 5 frontend development
+- [Frizzante](https://razshare.github.io/frizzante-docs/guides/get-started/) is a minimalistic and opinionated web server framework written in Go that uses Svelte to render pages
+- [Storybook 9](https://storybook.js.org/blog/storybook-9/) is out now and includes updates to the Svelte CSF story format to support Svelte 5
+- [Sheepdog](https://github.com/mainmatter/sheepdog) supplies a simple way to introduce cancellable concurrency into your app
+- Flowbite Svelte now has [datatable](https://flowbite-svelte.com/docs/plugins/datatables) and [text editor (WYSIWYG)](https://flowbite-svelte.com/docs/plugins/wysiwyg) components
+- [Ark UI](https://ark-ui.com/), a headless UI library, now has a Svelte version
+- [SVAR Svelte Filter](https://svar.dev/svelte/filter/) helps you add complex filtering UI and logic to data-heavy apps like admin panels or dashboards
+
+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/10-introduction/10-overview.md

@@ -9,7 +9,7 @@ The command line interface (CLI), `sv`, is a toolkit for creating and maintainin
 
 The easiest way to run `sv` is with [`npx`](https://docs.npmjs.com/cli/v8/commands/npx) (or the equivalent command if you're using a different package manager — for example, `pnpx` if you're using [pnpm](https://pnpm.io/)):
 
-```bash
+```sh
 npx sv <command> <args>
 ```
 

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

@@ -7,7 +7,7 @@ title: sv create
 
 ## Usage
 
-```bash
+```sh
 npx sv create [options] [path]
 ```
 

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

@@ -7,11 +7,11 @@ title: sv add
 
 ## Usage
 
-```bash
+```sh
 npx sv add
 ```
 
-```bash
+```sh
 npx sv add [add-ons]
 ```
 

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

@@ -15,13 +15,13 @@ Requires Node 16 or later.
 
 You will need to have the `svelte-check` package installed in your project:
 
-```bash
+```sh
 npm i -D svelte-check
 ```
 
 ## Usage
 
-```bash
+```sh
 npx sv check
 ```
 
@@ -60,7 +60,7 @@ Use this if you only want to check the Svelte files found in the current directo
 
 Files/folders to ignore, relative to workspace root. Paths should be comma-separated and quoted. Example:
 
-```bash
+```sh
 npx sv check --ignore "dist,build"
 ```
 
@@ -76,7 +76,7 @@ If provided, warnings will cause `sv check` to exit with an error code.
 
 A quoted, comma-separated list of `code:behaviour` pairs where `code` is a [compiler warning code](../svelte/compiler-warnings) and `behaviour` is either `ignore` or `error`:
 
-```bash
+```sh
 npx sv check --compiler-warnings "css_unused_selector:ignore,a11y_missing_attribute:error"
 ```
 
@@ -91,7 +91,7 @@ A quoted, comma-separated list of sources that should run diagnostics on your co
 
 Example:
 
-```bash
+```sh
 npx sv check --diagnostic-sources "js,svelte"
 ```
 

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

@@ -9,12 +9,12 @@ Some migrations may annotate your codebase with tasks for completion that you ca
 
 ## Usage
 
-```bash
+```sh
 npx sv migrate
 ```
 
 You can also specify a migration directly via the CLI:
-```bash
+```sh
 npx sv migrate [migration]
 ```
 

apps/svelte.dev/content/docs/cli/30-add-ons/03-devtools-json.md

@@ -0,0 +1,40 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: devtools-json
+---
+
+The `devtools-json` add-on installs [`vite-plugin-devtools-json`](https://github.com/ChromeDevTools/vite-plugin-devtools-json/), which is a Vite plugin for generating a Chromium DevTools project settings file on-the-fly in the development server. This file is served from `/.well-known/appspecific/com.chrome.devtools.json` and tells Chromium browsers where your project's source code lives so that you can use [the workspaces feature](https://developer.chrome.com/docs/devtools/workspaces) to edit source files in the browser.
+
+> [!NOTE]
+> Installing the plugin enables the feature for all users connecting to the dev server with a Chromium browser, and allows the browser to read and write all files within the directory. If using Chrome's AI Assistance feature, this may also result in data being sent to Google.
+
+## Alternatives
+
+If you'd prefer not to install the plugin, but still want to avoid seeing a message about the missing file, you have a couple of options.
+
+Firstly, you can prevent the request from being issued on your machine by disabling the feature in your browser. You can do this in Chrome by visiting `chrome://flags` and disabling the "DevTools Project Settings". You may also be interested in disabling "DevTools Automatic Workspace Folders" since it’s closely related.
+
+You can also prevent the web server from issuing a notice regarding the incoming request for all developers of your application by handling the request yourself. For example, you can create a file named `.well-known/appspecific/com.chrome.devtools.json` with the contents `"Go away, Chrome DevTools!"` or you can add logic to respond to the request in your [`handle`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) hook:
+
+```js
+/// file: src/hooks.server.js
+import { dev } from '$app/environment';
+
+export function handle({ event, resolve }) {
+	if (dev && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {
+		return new Response(undefined, { status: 404 });
+	}
+
+	return resolve(event);
+}
+```
+
+## Usage
+
+```sh
+npx sv add devtools-json
+```
+
+## What you get
+
+- `vite-plugin-devtools-json` added to your Vite plugin options

apps/svelte.dev/content/docs/cli/30-add-ons/05-drizzle.md

@@ -7,7 +7,7 @@ title: drizzle
 
 ## Usage
 
-```bash
+```sh
 npx sv add drizzle
 ```
 
@@ -28,7 +28,7 @@ Which database variant to use:
 - `mysql` — another popular open source database
 - `sqlite` — file-based database not requiring a database server
 
-```bash
+```sh
 npx sv add drizzle=database:postgresql
 ```
 
@@ -40,7 +40,7 @@ The SQL client to use, depends on `database`:
 - For `mysql`: `mysql2`, `planetscale`
 - For `sqlite`: `better-sqlite3`, `libsql`, `turso`
 
-```bash
+```sh
 npx sv add drizzle=database:postgresql+client:postgres.js
 ```
 
@@ -50,6 +50,6 @@ Drizzle is compatible with well over a dozen database drivers. We just offer a f
 
 Whether to add Docker Compose configuration. Only available for [`database`](#Options-database) `postgresql` or `mysql`
 
-```bash
+```sh
 npx sv add drizzle=database:postgresql+client:postgres.js+docker:yes
 ```

apps/svelte.dev/content/docs/cli/30-add-ons/10-eslint.md

@@ -7,7 +7,7 @@ title: eslint
 
 ## Usage
 
-```bash
+```sh
 npx sv add eslint
 ```
 

apps/svelte.dev/content/docs/cli/30-add-ons/15-lucia.md

@@ -7,7 +7,7 @@ An auth setup following [the Lucia auth guide](https://lucia-auth.com/).
 
 ## Usage
 
-```bash
+```sh
 npx sv add lucia
 ```
 
@@ -22,6 +22,6 @@ npx sv add lucia
 
 Whether to include demo registration and login pages.
 
-```bash
+```sh
 npx sv add lucia=demo:yes
 ```