feat(site-2): TS in docs (#8452)

* Commit

* Push working type generation code

* Fix type gen script invocation

* Delete type-info.js

* Change build script

* Recreate package lock

* mkdir generated

* Add type references to some pages

* Add TS-able snippets to docs examples

* Fix some stuff

* Add types to individual functions

* Add to store page

* Refactor compile-types.js

* Move ts sourcefile stuff to compile-types

* Remove commented code

* Half attempt at export aliases

* Add

* Fix, add disclaimer for svelte/internal

* Disable /docs prerendering

* Remove internals page

* Remove redundant stuff

* Make search work with it

* Fix compile types logic

* Add file: comment,

* Add two-slash to docs pages

* Get type links working

* Remove console.log

* Add action module

* Fix actions logic

* Make compile-types logic more robust

* Bump site-kit

* Fix gitignore

* Use moduleResolution bundler

* Don't apply shiki-twoslash to auto generated code snippets from render

* Recreate package lock

* Make TSbpage undraft

* Fix svelte component types

* Remove console.log

* No more sveltekit

* Make regex smarter

* Update sites/svelte.dev/scripts/type-gen/compile-types.js

Co-authored-by: Simon H <[email protected]>

* Rebuild package lock

* Remove commented out code

* Update deps

* Remove $$_attributes

---------

Co-authored-by: Simon H <[email protected]>

Author: PuruVJ

site/content/docs/02-template-syntax/01-svelte-components.md

@@ -52,10 +52,12 @@ In development mode (see the [compiler options](/docs/svelte-compiler#svelte-com
 If you export a `const`, `class` or `function`, it is readonly from outside the component. Functions are valid prop values, however, as shown below.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	// these are readonly
 	export const thisIs = 'readonly';
 
+	/** @param {string} name */
 	export function greet(name) {
 		alert(`hello ${name}!`);
 	}
@@ -70,7 +72,9 @@ Readonly props can be accessed as properties on the element, tied to the compone
 You can use reserved words as prop names.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
+	/** @type {string} */
 	let className;
 
 	// creates a `class` property, even
@@ -155,10 +159,12 @@ Any top-level statement (i.e. not inside a block or a function) can be made reac
 Only values which directly appear within the `$:` block will become dependencies of the reactive statement. For example, in the code below `total` will only update when `x` changes, but not `y`.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let x = 0;
 	let y = 0;
 
+	/** @param {number} value */
 	function yPlusAValue(value) {
 		return value + y;
 	}
@@ -179,9 +185,10 @@ It is important to note that the reactive blocks are ordered via simple static a
 	let x = 0;
 	let y = 0;
 
-	const setY = (value) => {
+	/** @param {number} value */
+	function setY(value) {
 		y = value;
-	};
+	}
 
 	$: yDependent = y;
 	$: setY(x);
@@ -193,7 +200,9 @@ Moving the line `$: yDependent = y` below `$: setY(x)` will cause `yDependent` t
 If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
+	/** @type {number} */
 	export let num;
 
 	// we don't need to declare `squared` and `cubed`
@@ -232,7 +241,8 @@ Local variables (that do not represent store values) must _not_ have a `$` prefi
 
 #### Store contract
 
-```js
+```ts
+// @noErrors
 store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
 ```
 

site/content/docs/02-template-syntax/05-element-directives.md

@@ -17,9 +17,11 @@ on:eventname|modifiers={handler}
 Use the `on:` directive to listen to DOM events.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let count = 0;
 
+	/** @param {MouseEvent} event */
 	function handleClick(event) {
 		count += 1;
 	}
@@ -70,12 +72,14 @@ 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() {
 		counter = counter + 1;
 	}
 
+	/** @param {MouseEvent} event */
 	function track(event) {
 		trackEvent(event);
 	}
@@ -274,8 +278,11 @@ bind:group={variable}
 Inputs that work together can use `bind:group`.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let tortilla = 'Plain';
+
+	/** @type {Array<string>} */
 	let fillings = [];
 </script>
 
@@ -302,9 +309,11 @@ bind:this={dom_node}
 To get a reference to a DOM node, use `bind:this`.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { onMount } from 'svelte';
 
+	/** @type {HTMLCanvasElement} */
 	let canvasElement;
 
 	onMount(() => {
@@ -390,7 +399,8 @@ use:action
 use:action={parameters}
 ```
 
-```js
+```ts
+// @noErrors
 action = (node: HTMLElement, parameters: any) => {
 	update?: (parameters: any) => void,
 	destroy?: () => void
@@ -400,7 +410,9 @@ 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) {
 		// the node has been mounted in the DOM
 
@@ -420,9 +432,11 @@ 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;
 
+	/** @type {import('svelte/action').Action}  */
 	function foo(node, bar) {
 		// the node has been mounted in the DOM
 
@@ -460,6 +474,7 @@ transition:fn|local={params}
 ```
 
 ```js
+// @noErrors
 transition = (node: HTMLElement, params: any, options: { direction: 'in' | 'out' | 'both' }) => {
 	delay?: number,
 	duration?: number,
@@ -504,9 +519,11 @@ 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';
 
+	/** @type {boolean} */
 	export let visible;
 
 	function whoosh(node, params) {
@@ -657,6 +674,7 @@ animate:name={params}
 ```
 
 ```js
+// @noErrors
 animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {
 	delay?: number,
 	duration?: number,
@@ -667,6 +685,7 @@ animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) =>
 ```
 
 ```ts
+// @noErrors
 DOMRect {
 	bottom: number,
 	height: number,
@@ -712,10 +731,20 @@ 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
+<!--- file: App.svelte --->
 <script>
 	import { cubicOut } from 'svelte/easing';
 
+	/**
+	 * @param {HTMLElement} node
+	 * @param {Object} states
+	 * @param {DOMRect} states.from
+	 * @param {DOMRect} states.to
+	 * @param {any} params
+	 */
 	function whizz(node, { from, to }, params) {
 		const dx = from.left - to.left;
 		const dy = from.top - to.top;
@@ -744,6 +773,13 @@ A custom animation function can also return a `tick` function, which is called _
 <script>
 	import { cubicOut } from 'svelte/easing';
 
+	/**
+	 * @param {HTMLElement} node
+	 * @param {Object} states
+	 * @param {DOMRect} states.from
+	 * @param {DOMRect} states.to
+	 * @param {any} params
+	 */
 	function whizz(node, { from, to }, params) {
 		const dx = from.left - to.left;
 		const dy = from.top - to.top;

site/content/docs/02-template-syntax/07-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`);
 	}

site/content/docs/03-runtime/01-svelte.md

@@ -6,13 +6,7 @@ The `svelte` package exposes [lifecycle functions](/tutorial/onmount) and the [c
 
 ## `onMount`
 
-```js
-onMount(callback: () => void)
-```
-
-```js
-onMount(callback: () => () => void)
-```
+> EXPORT_SNIPPET: svelte#onMount
 
 The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).
 
@@ -48,9 +42,7 @@ If a function is returned from `onMount`, it will be called when the component i
 
 ## `beforeUpdate`
 
-```js
-beforeUpdate(callback: () => void)
-```
+> EXPORT_SNIPPET: svelte#beforeUpdate
 
 Schedules a callback to run immediately before the component is updated after any state change.
 
@@ -68,9 +60,7 @@ Schedules a callback to run immediately before the component is updated after an
 
 ## `afterUpdate`
 
-```js
-afterUpdate(callback: () => void)
-```
+> EXPORT_SNIPPET: svelte#afterUpdate
 
 Schedules a callback to run immediately after the component has been updated.
 
@@ -88,9 +78,7 @@ Schedules a callback to run immediately after the component has been updated.
 
 ## `onDestroy`
 
-```js
-onDestroy(callback: () => void)
-```
+> EXPORT_SNIPPET: svelte#onDestroy
 
 Schedules a callback to run immediately before the component is unmounted.
 
@@ -108,9 +96,7 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
 
 ## `tick`
 
-```js
-promise: Promise = tick();
-```
+> EXPORT_SNIPPET: svelte#tick
 
 Returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
 
@@ -128,9 +114,7 @@ Returns a promise that resolves once any pending state changes have been applied
 
 ## `setContext`
 
-```js
-setContext(key: any, context: any)
-```
+> EXPORT_SNIPPET: svelte#setContext
 
 Associates an arbitrary `context` object with the current component and the specified `key` and returns that object. The context is then available to children of the component (including slotted content) with `getContext`.
 
@@ -148,9 +132,7 @@ Like lifecycle functions, this must be called during component initialisation.
 
 ## `getContext`
 
-```js
-context: any = getContext(key: any)
-```
+> EXPORT_SNIPPET: svelte#getContext
 
 Retrieves the context that belongs to the closest parent component with the specified `key`. Must be called during component initialisation.
 
@@ -164,9 +146,7 @@ Retrieves the context that belongs to the closest parent component with the spec
 
 ## `hasContext`
 
-```js
-hasContext: boolean = hasContext(key: any)
-```
+> EXPORT_SNIPPET: svelte#hasContext
 
 Checks whether a given `key` has been set in the context of a parent component. Must be called during component initialisation.
 
@@ -182,9 +162,7 @@ Checks whether a given `key` has been set in the context of a parent component.
 
 ## `getAllContexts`
 
-```js
-contexts: Map<any, any> = getAllContexts()
-```
+> EXPORT_SNIPPET: svelte#getAllContexts
 
 Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation. Useful, for example, if you programmatically create a component and want to pass the existing context to it.
 
@@ -198,9 +176,7 @@ Retrieves the whole context map that belongs to the closest parent component. Mu
 
 ## `createEventDispatcher`
 
-```js
-dispatch: ((name: string, detail?: any, options?: DispatchOptions) => boolean) = createEventDispatcher();
-```
+> EXPORT_SNIPPET: svelte#createEventDispatcher
 
 Creates an event dispatcher that can be used to dispatch [component events](/docs/component-directives#on-eventname). Event dispatchers are functions that can take two arguments: `name` and `detail`.
 
@@ -246,3 +222,7 @@ Events can be cancelable by passing a third parameter to the dispatch function.
 	}
 </script>
 ```
+
+## Types
+
+> TYPES: svelte