Add some missing file annotations to examples in docs for TypeScript code examples

raymondwang · raymondwang · commit da2b83baf929 · 2024-04-03T22:24:06.000-04:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
