From 9ce5d9636d7a3800543b7ab816c09af8a9a10293 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Fri, 7 Apr 2023 01:35:56 +0530
Subject: [PATCH] Add TS-able snippets to docs examples

---
 .../02-template-syntax/01-dot-svelte-files.md    |  2 ++
 .../02-template-syntax/04-element-directives.md  | 16 ++++++++++++++++
 .../02-template-syntax/06-special-elements.md    |  4 ++++
 site/content/docs/03-runtime/01-svelte.md        |  7 +++++--
 site/content/docs/03-runtime/02-svelte-store.md  |  1 +
 .../04-compiler-and-api/01-svelte-compiler.md    |  5 +++--
 6 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/02-template-syntax/01-dot-svelte-files.md b/site/content/docs/02-template-syntax/01-dot-svelte-files.md
index 18c76b3944..61da7adaa2 100644
--- a/site/content/docs/02-template-syntax/01-dot-svelte-files.md
+++ b/site/content/docs/02-template-syntax/01-dot-svelte-files.md
@@ -69,6 +69,7 @@ You can use reserved words as prop names.
 
 ```svelte
 <script>
+	/** @type {string} */
 	let className;
 
 	// creates a `class` property, even
@@ -192,6 +193,7 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve
 
 ```svelte
 <script>
+	/** @type {number} */
 	export let num;
 
 	// we don't need to declare `squared` and `cubed`
diff --git a/site/content/docs/02-template-syntax/04-element-directives.md b/site/content/docs/02-template-syntax/04-element-directives.md
index 440cc6db92..c48a8a624c 100644
--- a/site/content/docs/02-template-syntax/04-element-directives.md
+++ b/site/content/docs/02-template-syntax/04-element-directives.md
@@ -276,6 +276,7 @@ Inputs that work together can use `bind:group`.
 ```svelte
 <script>
 	let tortilla = 'Plain';
+	/** @type {Array<string>} */
 	let fillings = [];
 </script>
 
@@ -303,6 +304,7 @@ To get a reference to a DOM node, use `bind:this`.
 <script>
 	import { onMount } from 'svelte';
 
+	/** @type {HTMLCanvasElement} */
 	let canvasElement;
 
 	onMount(() => {
@@ -399,6 +401,7 @@ Actions are functions that are called when an element is created. They can retur
 
 ```svelte
 <script>
+	/** @param {HTMLElement} node */
 	function foo(node) {
 		// the node has been mounted in the DOM
 
@@ -505,6 +508,7 @@ The function is called repeatedly _before_ the transition begins, with different
 <script>
 	import { elasticOut } from 'svelte/easing';
 
+	/** @type {boolean} */
 	export let visible;
 
 	function whoosh(node, params) {
@@ -710,10 +714,17 @@ The `t` argument passed to `css` is a value that goes from `0` and `1` after the
 
 The function is called repeatedly _before_ the animation begins, with different `t` and `u` arguments.
 
+<!-- TODO: Types -->
+
 ```svelte
 <script>
 	import { cubicOut } from 'svelte/easing';
 
+	/**
+	 * @param {HTMLElement} node
+	 * @param {{ from: DOMRect, to: DOMRect }} states
+	 * @param {any} params
+	 */
 	function whizz(node, { from, to }, params) {
 		const dx = from.left - to.left;
 		const dy = from.top - to.top;
@@ -742,6 +753,11 @@ A custom animation function can also return a `tick` function, which is called _
 <script>
 	import { cubicOut } from 'svelte/easing';
 
+	/**
+	 * @param {HTMLElement} node
+	 * @param {{ from: DOMRect, to: DOMRect }} states
+	 * @param {any} params
+	 */
 	function whizz(node, { from, to }, params) {
 		const dx = from.left - to.left;
 		const dy = from.top - to.top;
diff --git a/site/content/docs/02-template-syntax/06-special-elements.md b/site/content/docs/02-template-syntax/06-special-elements.md
index 5bf215a778..9aab2cbb98 100644
--- a/site/content/docs/02-template-syntax/06-special-elements.md
+++ b/site/content/docs/02-template-syntax/06-special-elements.md
@@ -156,6 +156,7 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
 
 ```svelte
 <script>
+	/** @type {number} */
 	export let count;
 </script>
 
@@ -198,6 +199,8 @@ If `this` is the name of a [void element](https://developer.mozilla.org/en-US/do
 ```svelte
 <script>
 	let tag = 'div';
+
+	/** @type {(e: MouseEvent) => void} */
 	export let handler;
 </script>
 
@@ -220,6 +223,7 @@ Unlike `<svelte:self>`, this element may only appear at the top level of your co
 
 ```svelte
 <script>
+	/** @param {KeyboardEvent} event */
 	function handleKeydown(event) {
 		alert(`pressed the ${event.key} key`);
 	}
diff --git a/site/content/docs/03-runtime/01-svelte.md b/site/content/docs/03-runtime/01-svelte.md
index 1072949263..584afc5b81 100644
--- a/site/content/docs/03-runtime/01-svelte.md
+++ b/site/content/docs/03-runtime/01-svelte.md
@@ -109,7 +109,8 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
 ## `tick`
 
 ```js
-promise: Promise = tick();
+/** @type {Promise<void>} */
+promise = tick();
 ```
 
 Returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
@@ -128,6 +129,8 @@ Returns a promise that resolves once any pending state changes have been applied
 
 ## `setContext`
 
+<!-- TODO: Better typing information -->
+
 ```js
 setContext(key: any, context: any)
 ```
@@ -165,7 +168,7 @@ Retrieves the context that belongs to the closest parent component with the spec
 ## `hasContext`
 
 ```js
-hasContext: boolean = hasContext(key: any)
+hasContext = hasContext(key: any)
 ```
 
 Checks whether a given `key` has been set in the context of a parent component. Must be called during component initialisation.
diff --git a/site/content/docs/03-runtime/02-svelte-store.md b/site/content/docs/03-runtime/02-svelte-store.md
index 9550a00529..e0afa10db0 100644
--- a/site/content/docs/03-runtime/02-svelte-store.md
+++ b/site/content/docs/03-runtime/02-svelte-store.md
@@ -70,6 +70,7 @@ Creates a store whose value cannot be set from 'outside', the first argument is
 ```js
 import { readable } from 'svelte/store';
 
+/** @type {import('svelte/store').Readable<Date>} */
 const time = readable(null, (set) => {
 	set(new Date());
 
diff --git a/site/content/docs/04-compiler-and-api/01-svelte-compiler.md b/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
index 092ef6abbf..a83b142291 100644
--- a/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
+++ b/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
@@ -172,10 +172,11 @@ A number of [community-maintained preprocessing plugins](https://sveltesociety.d
 You can write your own preprocessor using the `svelte.preprocess` API.
 
 ```js
-result: {
+/** @type {{
 	code: string,
 	dependencies: Array<string>
-} = await svelte.preprocess(
+}} */
+result = await svelte.preprocess(
 	source: string,
 	preprocessors: Array<{
 		markup?: (input: { content: string, filename: string }) => Promise<{