Merge branch 'main' into add-cli-docs

Author: manuel3108

apps/svelte.dev/.gitignore

@@ -6,7 +6,6 @@
 /src/routes/_home/Supporters/contributors.js
 /src/routes/_home/Supporters/donors.jpg
 /src/routes/_home/Supporters/donors.js
-/static/svelte-app.json
 
 # git-repositories of synced docs go here
 /repos/

apps/svelte.dev/content/blog/2020-07-17-svelte-and-typescript.md

@@ -66,18 +66,18 @@ You first need to set up [`svelte-preprocess`](https://github.com/sveltejs/svelt
 
 In a Rollup project, that would look like this — note that we also need to install `@rollup/plugin-typescript` so that Rollup can handle `.ts` files:
 
-```diff
-+ import autoPreprocess from 'svelte-preprocess';
-+ import typescript from '@rollup/plugin-typescript';
+```js
++++import autoPreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';+++
 
 export default {
-  ...,
-  plugins: [
-    svelte({
-+       preprocess: autoPreprocess()
-    }),
-+   typescript({ sourceMap: !production })
-  ]
+	// ...,
+	plugins: [
+		svelte({
+			+++preprocess: autoPreprocess()+++
+		}),
+		+++typescript({ sourceMap: !production })+++
+	]
 }
 ```
 

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

@@ -28,7 +28,7 @@ const database = {
 	}
 };
 // ---cut---
-// src/routes/blog/[slug]/+page.server.ts
+/// file: src/routes/blog/[slug]/+page.server.ts
 import type { ServerLoadEvent } from '@sveltejs/kit';
 
 export async function load(event: ServerLoadEvent) {
@@ -42,16 +42,16 @@ This works, but we can do better. Notice that we accidentally wrote `event.param
 
 This is where our automatic type generation comes in. Every route directory has a hidden `$types.d.ts` file with route-specific types:
 
-```diff
-// src/routes/blog/[slug]/+page.server.ts
--import type { ServerLoadEvent } from '@sveltejs/kit';
-+import type { PageServerLoadEvent } from './$types';
+```js
+/// file: src/routes/blog/[slug]/+page.server.ts
+---import type { ServerLoadEvent } from '@sveltejs/kit';---
++++import type { PageServerLoadEvent } from './$types';+++
 
 export async function load(event: PageServerLoadEvent) {
-    return {
--        post: await database.getPost(event.params.post)
-+        post: await database.getPost(event.params.slug)
-    };
+	return {
+		---post: await database.getPost(event.params.post)---
+		+++post: await database.getPost(event.params.slug)+++
+	};
 }
 ```
 
@@ -60,7 +60,7 @@ This reveals our typo, as it now errors on the `params.post` property access. Be
 After we have loaded our data, we want to display it in our `+page.svelte`. The same type generation mechanism ensures that the type of `data` is correct:
 
 ```svelte
-<!-- src/routes/blog/[slug]/+page.svelte -->
+/// file: src/routes/blog/[slug]/+page.svelte
 <script lang="ts">
 	import type { PageData } from './$types';
 
@@ -78,7 +78,7 @@ When running the dev server or the build, types are auto-generated. Thanks to th
 
 ```ts
 // @errors: 2344 2694 2307
-// $types.d.ts
+/// file: $types.d.ts
 import type * as Kit from '@sveltejs/kit';
 
 // types inferred from the routing tree
@@ -100,7 +100,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:
 
-```
+```tree
 // on disk:
 .svelte-kit/
 ├ types/
@@ -115,8 +115,9 @@ src/
 │ │ ├ [slug]/
 │ │ │ ├ +page.server.ts
 │ │ │ └ +page.svelte
+```
 
-
+```tree
 // what TypeScript sees:
 src/
 ├ routes/
@@ -131,24 +132,23 @@ src/
 
 Thanks to the automatic type generation we get advanced type safety. Wouldn't it be great though if we could just omit writing the types at all? As of today you can do exactly that:
 
-```diff
-// src/routes/blog/[slug]/+page.server.ts
--import type { PageServerLoadEvent } from './$types';
+```js
+/// file: src/routes/blog/[slug]/+page.server.ts
+---import type { PageServerLoadEvent } from './$types';---
 
--export async function load(event: PageServerLoadEvent) {
-+export async function load(event) {
-    return {
-        post: await database.getPost(event.params.post)
-    };
+export async function load(event---: PageServerLoadEvent---) {
+	return {
+		post: await database.getPost(event.params.post)
+	};
 }
 ```
 
-```diff
-<!-- src/routes/blog/[slug]/+page.svelte -->
+```svelte
+/// file: src/routes/blog/[slug]/+page.svelte
 <script lang="ts">
--    import type { PageData } from './$types';
--    export let data: PageData;
-+    export let data;
+	---import type { PageData } from './$types';---
+	---export let data: PageData;---
+	+++export let data;+++
 </script>
 ```
 

apps/svelte.dev/content/blog/2023-08-31-view-transitions.md

@@ -14,7 +14,7 @@ However, until now, you couldn’t easily use this API in a SvelteKit app, since
 You can trigger a view transition by calling `document.startViewTransition` and passing a callback that updates the DOM somehow. For our purposes today, SvelteKit will update the DOM as the user navigates. Once the callback finishes, the browser will transition to the new page state — by default, it does a crossfade between the old and the new states.
 
 ```js
-// @errors: 2339
+// @errors: 2339 2304
 const domUpdate = async () => {};
 // ---cut---
 document.startViewTransition(async () => {
@@ -76,32 +76,28 @@ With that, every navigation that occurs will trigger a view transition. You can
 
 <video src="https://sveltejs.github.io/assets/video/vt-demo-1.mp4" controls muted playsinline></video>
 
-<details>
-<summary>How the code works</summary>
-
-This code may look a bit intimidating – if you're curious, I can break it down line-by-line, but for now it’s enough to know that adding it will allow you to interact with the view transitions API during navigation.
-
-As mentioned above, the `onNavigate` callback will run immediately before the new page is rendered after a navigation. Inside the callback, we check if `document.startViewTransition` exists. If it doesn’t (i.e. the browser doesn’t support it), we exit early.
-
-We then return a promise to delay completing the navigation until the view transition has started. We use a [promise constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) so that we can control when the promise resolves.
-
-```js
-// @errors: 1108
-return new Promise((resolve) => {
-	document.startViewTransition(async () => {
-		resolve();
-		await navigation.complete;
-	});
-});
-```
-
-Inside the promise constructor, we start the view transition. Inside the view transition callback we resolve the promise we just returned, which indicates to SvelteKit that it should finish the navigation. It’s important that the navigation waits to finish until _after_ we start the view transition – the browser needs to snapshot the old state so it can transition to the new state.
-
-Finally, inside the view transition callback we wait for SvelteKit to finish the navigation by awaiting `navigation.complete`. Once `navigation.complete` resolves, the new page has been loaded into the DOM and the browser can animate between the two states.
-
-It’s a bit of a mouthful, but by not abstracting it we allow you to interact with the view transition directly and make any customizations you require.
-
-</details>
+> [!DETAILS] How the code works
+> This code may look a bit intimidating – if you're curious, I can break it down line-by-line, but for now it’s enough to know that adding it will allow you to interact with the view transitions API during navigation.
+>
+> As mentioned above, the `onNavigate` callback will run immediately before the new page is rendered after a navigation. Inside the callback, we check if `document.startViewTransition` exists. If it doesn’t (i.e. the browser doesn’t support it), we exit early.
+>
+> We then return a promise to delay completing the navigation until the view transition has started. We use a [promise constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) so that we can control when the promise resolves.
+>
+> ```js
+> // @errors: 1108
+> return new Promise((resolve) => {
+> 	document.startViewTransition(async () => {
+> 		resolve();
+> 		await navigation.complete;
+> 	});
+> });
+> ```
+>
+> Inside the promise constructor, we start the view transition. Inside the view transition callback we resolve the promise we just returned, which indicates to SvelteKit that it should finish the navigation. It’s important that the navigation waits to finish until > _after_ we start the view transition – the browser needs to snapshot the old state so it can transition to the new state.
+>
+> Finally, inside the view transition callback we wait for SvelteKit to finish the navigation by awaiting `navigation.complete`. Once `navigation.complete` resolves, the new page has been loaded into the DOM and the browser can animate between the two states.
+>
+> It’s a bit of a mouthful, but by not abstracting it we allow you to interact with the view transition directly and make any customizations you require.
 
 ## Customizing the transition with CSS
 
@@ -163,38 +159,34 @@ Now, the header will not transition in and out on navigation, but the rest of th
 
 <video src="https://sveltejs.github.io/assets/video/vt-demo-2.mp4" controls muted playsinline></video>
 
-<details>
-<summary>Fixing the types</summary>
-
-Since `startViewTransition` is not supported by all browsers, your IDE may not know that it exists. To make the errors go away and get the correct typings, add the following to your `app.d.ts`:
-
-```ts
-declare global {
-	// preserve any customizations you have here
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface Platform {}
-	}
-
-	// add these lines
-	interface ViewTransition {
-		updateCallbackDone: Promise<void>;
-		ready: Promise<void>;
-		finished: Promise<void>;
-		skipTransition: () => void;
-	}
-
-	interface Document {
-		startViewTransition(updateCallback: () => Promise<void>): ViewTransition;
-	}
-}
-
-export {};
-```
-
-</details>
+> [!DETAILS] Fixing the types
+> Since `startViewTransition` is not supported by all browsers, your IDE may not know that it exists. To make the errors go away and get the correct typings, add the following to your `app.d.ts`:
+>
+> ```dts
+> declare global {
+> 	// preserve any customizations you have here
+> 	namespace App {
+> 		// interface Error {}
+> 		// interface Locals {}
+> 		// interface PageData {}
+> 		// interface Platform {}
+> 	}
+>
+> 	// add these lines
+> 	interface ViewTransition {
+> 		updateCallbackDone: Promise<void>;
+> 		ready: Promise<void>;
+> 		finished: Promise<void>;
+> 		skipTransition: () => void;
+> 	}
+>
+> 	interface Document {
+> 		startViewTransition(updateCallback: () => Promise<void>): ViewTransition;
+> 	}
+> }
+>
+> export {};
+> ```
 
 ## Transitioning individual elements
 

apps/svelte.dev/content/blog/2023-09-20-runes.md

@@ -46,19 +46,19 @@ We don't yet have a release date for Svelte 5. What we're showing you here is a
 
 ## What are runes?
 
-> **rune** /ro͞on/ _noun_
+> [!NOTE] **rune** /ro͞on/ _noun_
 >
 > A letter or mark used as a mystical or magic symbol.
 
 Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses `let`, `=`, the `export` keyword and the `$:` label to mean specific things, runes use _function syntax_ to achieve the same things and more.
 
 For example, to declare a piece of reactive state, we can use the `$state` rune:
 
-```diff
+```svelte
 <!--- file: App.svelte --->
 <script>
--	let count = 0;
-+	let count = $state(0);
+	---let count = 0;---
+	+++let count = $state(0);+++
 
 	function increment() {
 		count += 1;
@@ -94,64 +94,63 @@ export function createCounter() {
 
 Because this implements the _store contract_ — the returned value has a `subscribe` method — we can reference the store value by prefixing the store name with `$`:
 
-```diff
+```svelte
 <!--- file: App.svelte --->
 <script>
 /// file: App.svelte
-+	import { createCounter } from './counter.js';
-+
-+	const counter = createCounter();
--	let count = 0;
--
--	function increment() {
--		count += 1;
--	}
++++	import { createCounter } from './counter.js';
+
+	const counter = createCounter();+++
+---	let count = 0;
+
+	function increment() {
+		count += 1;
+	}---
 </script>
 
--<button on:click={increment}>
--	clicks: {count}
-+<button on:click={counter.increment}>
-+	clicks: {$counter}
+---<button on:click={increment}>
+	clicks: {count}---
++++<button on:click={counter.increment}>
+	clicks: {$counter}+++
 </button>
 ```
 
 This works, but it's pretty weird! We've found that the store API can get rather unwieldy when you start doing more complex things.
 
 With runes, things get much simpler:
 
-```diff
+```js
 /// file: counter.svelte.js
--import { writable } from 'svelte/store';
+---import { writable } from 'svelte/store';---
 
 export function createCounter() {
--	const { subscribe, update } = writable(0);
-+	let count = $state(0);
+	---const { subscribe, update } = writable(0);---
+	+++let count = $state(0);+++
 
 	return {
--		subscribe,
--		increment: () => update((n) => n + 1)
-+		get count() { return count },
-+		increment: () => count += 1
-   };
+		---subscribe,---
+		---increment: () => update((n) => n + 1)---
+		+++get count() { return count },+++
+		+++increment: () => count += 1+++
+	};
 }
 ```
 
-```diff
+```svelte
 <!--- file: App.svelte --->
 <script>
--	import { createCounter } from './counter.js';
-+	import { createCounter } from './counter.svelte.js';
+	import { createCounter } from './counter+++.svelte+++.js';
 
 	const counter = createCounter();
 </script>
 
 <button on:click={counter.increment}>
--	clicks: {$counter}
-+	clicks: {counter.count}
+	---clicks: {$counter}---
+	+++clicks: {counter.count}+++
 </button>
 ```
 
-> Outside `.svelte` components, runes can only be used in `.svelte.js` and `.svelte.ts` modules.
+> [!NOTE] Outside `.svelte` components, runes can only be used in `.svelte.js` and `.svelte.ts` modules.
 
 Note that we're using a [get property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) in the returned object, so that `counter.count` always refers to the current value rather than the value at the time the function was called.