Merge branch 'main' into select-top-file

Author: teemingc

apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md

@@ -17,7 +17,7 @@ This article isn't in any way intended as criticism of the hard work the CSS-in-
 
 Everything in CSS is global. Because of that, styles intended for one bit of markup often end up affecting another. Because of _that_, developers often resort to wild namespacing conventions (not 'rules', since they're very difficult to enforce) that mostly just increase your risk of RSI.
 
-It gets worse when you're working on a team. No-one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
+It gets worse when you're working on a team. No one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
 
 The consequence of all this is the **append-only stylesheet**. There's no way of knowing which code can safely be removed, so it's common to undo some existing style with another, more specific style — even on relatively small projects.
 

apps/svelte.dev/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md

@@ -42,7 +42,7 @@ Misunderstood claims about virtual DOM performance date back to the launch of Re
 	<figcaption>Screenshot from <a href="https://www.youtube.com/watch?v=x7cQ3mrcKaY">Rethinking Best Practices</a> at JSConfEU 2013</figcaption>
 </figure>
 
-But hang on a minute! The virtual DOM operations are _in addition to_ the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no-one actually does:
+But hang on a minute! The virtual DOM operations are _in addition to_ the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no one actually does:
 
 ```js
 // @noErrors

apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md

@@ -98,7 +98,7 @@ export type PageData = Kit.ReturnType<
 >;
 ```
 
-We don't actually write `$types.d.ts` into your `src` directory — that would be messy, and no-one likes messy code. Instead, we use a TypeScript feature called [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs), which lets us map ‘virtual’ directories to real ones. By setting `rootDirs` to the project root (the default) and additionally to `.svelte-kit/types` (the output folder of all the generated types) and then mirroring the route structure inside it we get the desired behavior:
+We don't actually write `$types.d.ts` into your `src` directory — that would be messy, and no one likes messy code. Instead, we use a TypeScript feature called [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs), which lets us map ‘virtual’ directories to real ones. By setting `rootDirs` to the project root (the default) and additionally to `.svelte-kit/types` (the output folder of all the generated types) and then mirroring the route structure inside it we get the desired behavior:
 
 ```tree
 // on disk:

apps/svelte.dev/content/blog/2025-06-01-whats-new-in-svelte-june-2025.md

@@ -0,0 +1,81 @@
+---
+title: "What's new in Svelte: June 2025"
+description: 'Attachments are the new actions, plus better snippets and classes'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+In addition to advancing the work on Async Svelte, the maintainers have been hard at work introducing long requested features like Attachments.
+
+This month, we'll share a bit about the new API along with a huge showcase of apps/sites built with Svelte...
+
+Let's dive in!
+
+## What's new in Svelte and SvelteKit
+
+- Attachments are essentially a more flexible and modern version of actions. Read more about their use-cases and improvements over actions in the PR ([#1500](https://github.com/sveltejs/svelte/pull/15000)) or in the [Svelte docs](https://svelte.dev/docs/svelte/@attach) (**[email protected]**, **[email protected]**)
+- Do you have actions you love and want to use them as attachments? The `fromAction` utility lets you convert actions into attachments (**[email protected]**, [#15933](https://github.com/sveltejs/svelte/pull/15933))
+- Generics are now allowed on snippets - improving typing and type hints (**[email protected]**, **[email protected]**, [#15915](https://github.com/sveltejs/svelte/pull/15915))
+- The Svelte extension will now allow you to add missing imports on save (**[email protected]**, [#2744](https://github.com/sveltejs/language-tools/pull/2744))
+- State fields can now be declared inside class constructors (**[email protected]**, [#15820](https://github.com/sveltejs/svelte/pull/15820))
+- Svelte is now XHTML compliant and the new `fragments: 'html' | 'tree'` option adds wider CSP compliance (**[email protected]**, [#15538](https://github.com/sveltejs/svelte/pull/15538))
+- Client-side code is now allowed to run at the top-level of universal pages/layouts when SSR is disabled and page options are only boolean or string literals (**[email protected]**, [#13684](https://github.com/sveltejs/kit/pull/13684))
+
+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
+
+- [Whimsy](https://whimsy.rocks/) is a small game engine and a fantasy console for making interactive stories
+- [DASHBOT](https://dashbot.jianong.me/) is a 1v1 Space Robot Sprint Battle game for two players - with local and online modes
+- [Kraa](https://kraa.io/) is a web-based markdown editor that does things a little differently
+- [Shovel AI](https://www.shovel-ai.com/) is a batch tool for interacting with large amounts of a text data with AI models
+- [md.uy](https://md.uy/) is a collaborative, local-first, peer-to-peer markdown editor
+- [BringYourAI](https://bringyourai.com/) is a browser extension that provides instant codebase context on any AI chat website
+- [Joe Malatesta](https://www.joemmalatesta.com/film) figured out a way to present his film photos in a digital environment
+- [Notion Avatar](https://notion-avatar-svelte.vercel.app/) is a Notion-style avatar editor with Svelte 5 Runes
+- [ORBITS](https://www.orbits.so/) is your second brain for who you know and who you meet
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- In case you missed it, [all the videos from Svelte Summit](https://www.youtube.com/playlist?list=PL8bMgX1kyZThKy_B41FQHk_xsHMQouV1Z) are released over the course of the next few days on Svelte Society YouTube. More on how that happened in last month's [blog post](https://svelte.dev/blog/svelte-summit-videos)
+- [Svelte Attachments Are Here And They're Awesome](https://www.youtube.com/watch?v=9PREEREiPAE) by Joy of Code
+- [SvelteBench](https://khromov.github.io/svelte-bench/benchmark-results-merged.html) (from Stanislav Khromov) shows how different AI models perform out of the box on Svelte 5 syntax - now updated with Anthropic's new Claude 4 models
+- [First look at GitHub Copilot Coding Agent - The $40/month AI developer that actually works!](https://www.youtube.com/watch?v=FRcOen6JuJc) by Stanislav Khromov (video)
+- [Truly Native Apps with Svelte?](https://mainmatter.com/blog/2025/05/22/native-apps-with-svelte/) by Paolo Ricciuti
+
+_This Week in Svelte_
+
+- [Ep. 102](https://www.youtube.com/watch?v=frp8BXlBAZY) — Svelte+Lynx and Async Svelte
+- [Ep. 103](https://www.youtube.com/watch?v=P3Ldkuksqu0) — Attachments
+- [Ep. 104](https://www.youtube.com/watch?v=txM-BCrZcbc) — Skeleton v3.0
+- [Ep. 105](https://www.youtube.com/watch?v=Tiq0wivUNAE) — Changelog
+
+_To Watch/Read_
+
+- [Svelte's Next Big Change? (server components soon?)](https://www.youtube.com/watch?v=nQB9iRijqBY) by Better Stack
+- [I spent some time using Better-Auth and Polar with SvelteKit and this is what I think](https://www.reddit.com/r/sveltejs/comments/1kaiwkk/i_spent_some_time_using_betterauth_and_polar_with/) by elansx
+- [Building md.uy - Peer-to-Peer Markdown Editor](https://mr19.xyz/blog/md-uy/) by mateor
+
+### Libraries, Tools & Components
+
+- [Bits UI v2 released](https://www.bits-ui.com) - with support for attachments, `$props.id()`, Shadow DOM, and more
+- [Composably](https://github.com/kompismoln/composably) is a content processing plugin for Vite and SvelteKit with typed content + dynamic Svelte components at build time
+- [Svelte Flow is now 1.0](https://svelteflow.dev/) - with Svelte 5 support, TSDoc and a bunch of new features to make interactive flow charts even better
+- [fox ui](https://flo-bit.dev/ui-kit/) is a collection UI components built with Tailwind 4 and Svelte 5 - now with a [rich text editor](https://www.reddit.com/r/sveltejs/comments/1kjwuci/currently_building_a_svelte_rich_text_editor_on/)
+- [fluid-dnd](https://github.com/carlosjorger/fluid-dnd) is a drag and drop library for Vue, React and Svelte
+- [sveltekit-password-protect](https://github.com/humanshield-sidepack/sveltekit-password-protect) is a simple utility to add a layer of protection to your websites
+- [sveltekit-image-optimize](https://github.com/humanshield-sidepack/sveltekit-image-optimize) is a simple utility that helps you create an endpoint of your svelte app that optimizes your images
+- [[email protected] introduces Panels](https://inspect.eirik.space/reference/panel) - a fixed-position resizable panel / drawer that separates the debugging UI from flow of your website
+- [nuqs-svelte](https://github.com/rtrampox/nuqs-svelte) is an unnoficial Svelte port of nuqs library - a type-safe search params state manager
+- [sv-router](https://sv-router.vercel.app/) is a type-safe SPA router with file-based or code-based routing
+- [svelte-textcircle](https://github.com/LoStis-World/svelte-textcircle) displays text in a circular layout with customizable animations and styling
+
+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/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]
 ```
 
@@ -39,3 +39,4 @@ You can select multiple space-separated add-ons from [the list below](#Official-
 - [`sveltekit-adapter`](sveltekit-adapter)
 - [`tailwindcss`](tailwind)
 - [`vitest`](vitest)
+- [`devtools-json`](devtools-json)

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]
 ```