From a6bf91c83b29070a8c3ff2848d51b88bfa224aad Mon Sep 17 00:00:00 2001
From: Raymond Wang <r@ymond.wang>
Date: Mon, 8 Apr 2024 07:04:15 -0400
Subject: [PATCH] docs: add file annotations to examples that benefit from ts
 toggle (#11058)

---
 .../docs/02-template-syntax/01-svelte-components.md         | 1 +
 .../docs/02-template-syntax/05-element-directives.md        | 6 ++++++
 .../docs/02-template-syntax/07-special-elements.md          | 2 ++
 documentation/docs/03-runtime/07-svelte-action.md           | 3 +++
 packages/svelte/README.md                                   | 2 +-
 5 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/documentation/docs/02-template-syntax/01-svelte-components.md b/documentation/docs/02-template-syntax/01-svelte-components.md
index adce71f684..7316e213b8 100644
--- a/documentation/docs/02-template-syntax/01-svelte-components.md
+++ b/documentation/docs/02-template-syntax/01-svelte-components.md
@@ -177,6 +177,7 @@ Total: {total}
 It is important to note that the reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them. This means that `yDependent` will not be updated when `x` is updated in the following example:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let x = 0;
 	let y = 0;
diff --git a/documentation/docs/02-template-syntax/05-element-directives.md b/documentation/docs/02-template-syntax/05-element-directives.md
index 9a30fb1061..60c0ce01dc 100644
--- a/documentation/docs/02-template-syntax/05-element-directives.md
+++ b/documentation/docs/02-template-syntax/05-element-directives.md
@@ -74,6 +74,7 @@ If the `on:` directive is used without a value, the component will _forward_ the
 It's possible to have multiple event listeners for the same event:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let counter = 0;
 	function increment() {
@@ -284,6 +285,7 @@ bind:group={variable}
 Inputs that work together can use `bind:group`.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let tortilla = 'Plain';
 
@@ -315,6 +317,7 @@ bind:this={dom_node}
 To get a reference to a DOM node, use `bind:this`.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { onMount } from 'svelte';
 
@@ -420,6 +423,7 @@ action = (node: HTMLElement, parameters: any) => {
 Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/** @type {import('svelte/action').Action}  */
 	function foo(node) {
@@ -441,6 +445,7 @@ An action can have a parameter. If the returned value has an `update` method, it
 > Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	export let bar;
 
@@ -558,6 +563,7 @@ The `t` argument passed to `css` is a value between `0` and `1` after the `easin
 The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { elasticOut } from 'svelte/easing';
 
diff --git a/documentation/docs/02-template-syntax/07-special-elements.md b/documentation/docs/02-template-syntax/07-special-elements.md
index 74a42d486e..d8395d4981 100644
--- a/documentation/docs/02-template-syntax/07-special-elements.md
+++ b/documentation/docs/02-template-syntax/07-special-elements.md
@@ -153,6 +153,7 @@ The `<svelte:self>` element allows a component to include itself, recursively.
 It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/** @type {number} */
 	export let count;
@@ -219,6 +220,7 @@ The `<svelte:window>` element allows you to add event listeners to the `window`
 Unlike `<svelte:self>`, this element may only appear at the top level of your component and must never be inside a block or element.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/** @param {KeyboardEvent} event */
 	function handleKeydown(event) {
diff --git a/documentation/docs/03-runtime/07-svelte-action.md b/documentation/docs/03-runtime/07-svelte-action.md
index b5670a6ee2..1511a045ae 100644
--- a/documentation/docs/03-runtime/07-svelte-action.md
+++ b/documentation/docs/03-runtime/07-svelte-action.md
@@ -5,6 +5,7 @@ title: svelte/action
 Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/** @type {import('svelte/action').Action}  */
 	function foo(node) {
@@ -26,6 +27,7 @@ An action can have a parameter. If the returned value has an `update` method, it
 > Don't worry that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/** @type {string} */
 	export let bar;
@@ -54,6 +56,7 @@ An action can have a parameter. If the returned value has an `update` method, it
 Sometimes actions emit custom events and apply custom attributes to the element they are applied to. To support this, actions typed with `Action` or `ActionReturn` type can have a last parameter, `Attributes`:
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	/**
 	 * @type {import('svelte/action').Action<HTMLDivElement, { prop: any }, { 'on:emit': (e: CustomEvent<string>) => void }>}
diff --git a/packages/svelte/README.md b/packages/svelte/README.md
index a8b5ebb817..a210ad1e9b 100644
--- a/packages/svelte/README.md
+++ b/packages/svelte/README.md
@@ -14,7 +14,7 @@ Learn more at the [Svelte website](https://svelte.dev), or stop by the [Discord
 
 You can play around with Svelte in the [tutorial](https://learn.svelte.dev/), [examples](https://svelte.dev/examples), and [REPL](https://svelte.dev/repl).
 
-When you're ready to build a full-fledge application, we recommend using [SvelteKit](https://kit.svelte.dev):
+When you're ready to build a full-fledged application, we recommend using [SvelteKit](https://kit.svelte.dev):
 
 ```bash
 npm create svelte@latest my-app