docs: add missing type information (#13928)

* add types

* align config export and replace sh with bash

* type errors to go with new type fixes in svelte.dev

* separate syntax highlighting into a different pr

* actually i guess this section was moved above? removing

* add error annotation pending rewrite in #14203

---------

Co-authored-by: Rich Harris <[email protected]>

Author: eltigerchino

documentation/docs/20-core-concepts/30-form-actions.md

@@ -469,6 +469,7 @@ Note that you need to `deserialize` the response before processing it further us
 If you have a `+server.js` alongside your `+page.server.js`, `fetch` requests will be routed there by default. To `POST` to an action in `+page.server.js` instead, use the custom `x-sveltekit-action` header:
 
 ```js
+// @errors: 2532 2304
 const response = await fetch(this.action, {
 	method: 'POST',
 	body: data,

documentation/docs/25-build-and-deploy/40-adapter-node.md

@@ -13,11 +13,14 @@ Install with `npm i -D @sveltejs/adapter-node`, then add the adapter to your `sv
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-node';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter()
 	}
 };
+
+export default config;
 ```
 
 ## Deploying
@@ -146,7 +149,8 @@ The adapter can be configured with various options:
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-node';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter({
 			// default options are shown
@@ -156,6 +160,8 @@ export default {
 		})
 	}
 };
+
+export default config;
 ```
 
 ### out

documentation/docs/25-build-and-deploy/50-adapter-static.md

@@ -11,11 +11,11 @@ This will prerender your entire site as a collection of static files. If you'd l
 Install with `npm i -D @sveltejs/adapter-static`, then add the adapter to your `svelte.config.js`:
 
 ```js
-// @errors: 2307
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-static';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter({
 			// default options are shown. On some platforms
@@ -28,6 +28,8 @@ export default {
 		})
 	}
 };
+
+export default config;
 ```
 
 ...and add the [`prerender`](page-options#prerender) option to your root layout:
@@ -49,13 +51,17 @@ Some platforms have zero-config support (more to come in future):
 On these platforms, you should omit the adapter options so that `adapter-static` can provide the optimal configuration:
 
 ```js
-// @errors: 2304
 /// file: svelte.config.js
-export default {
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter(---{...}---)
 	}
 };
+
+export default config;
 ```
 
 ## Options
@@ -89,7 +95,7 @@ You'll also want to generate a fallback `404.html` page to replace the default 4
 A config for GitHub Pages might look like the following:
 
 ```js
-// @errors: 2307 2322
+// @errors: 2322
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-static';
 

documentation/docs/25-build-and-deploy/55-single-page-apps.md

@@ -18,17 +18,19 @@ If you don't have any server-side logic (i.e. `+page.server.js`, `+layout.server
 Install with `npm i -D @sveltejs/adapter-static`, then add the adapter to your `svelte.config.js` with the following options:
 
 ```js
-// @errors: 2307
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-static';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter({
 			fallback: '200.html' // may differ from host to host
 		})
 	}
 };
+
+export default config;
 ```
 
 The `fallback` page is an HTML page created by SvelteKit from your page template (e.g. `app.html`) that loads your app and navigates to the correct route. For example [Surge](https://surge.sh/help/adding-a-200-page-for-client-side-routing), a static web host, lets you add a `200.html` file that will handle any requests that don't correspond to static assets or prerendered pages.

documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md

@@ -20,7 +20,8 @@ Install with `npm i -D @sveltejs/adapter-cloudflare`, then add the adapter to yo
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-cloudflare';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter({
 			// See below for an explanation of these options
@@ -38,6 +39,8 @@ export default {
 		})
 	}
 };
+
+export default config;
 ```
 
 ## Options
@@ -125,9 +128,25 @@ Functions contained in the [`/functions` directory](https://developers.cloudflar
 The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`ctx`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints:
 
 ```js
-// @errors: 7031
+// @filename: ambient.d.ts
+import { DurableObjectNamespace } from '@cloudflare/workers-types';
+
+declare global {
+	namespace App {
+		interface Platform {
+			env: {
+				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
+			};
+		}
+	}
+}
+// @filename: +server.js
+// ---cut---
+// @errors: 2355 2322
+/// file: +server.js
+/** @type {import('./$types').RequestHandler} */
 export async function POST({ request, platform }) {
-	const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
+	const x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
 }
 ```
 
@@ -142,7 +161,7 @@ To make these types available to your app, install [`@cloudflare/workers-types`]
 declare global {
 	namespace App {
 		interface Platform {
-+++			env?: {
++++			env: {
 				YOUR_KV_NAMESPACE: KVNamespace;
 				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
 			};+++
@@ -197,15 +216,19 @@ Cloudflare no longer recommends using [Workers Sites](https://developers.cloudfl
 ### svelte.config.js
 
 ```js
+// @errors: 2307
 /// file: svelte.config.js
 ---import adapter from '@sveltejs/adapter-cloudflare-workers';---
 +++import adapter from '@sveltejs/adapter-cloudflare';+++
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter()
 	}
 };
+
+export default config;
 ```
 
 ### wrangler.toml

documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md

@@ -15,13 +15,16 @@ Install with `npm i -D @sveltejs/adapter-cloudflare-workers`, then add the adapt
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-cloudflare-workers';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter({
 			// see below for options that can be set here
 		})
 	}
 };
+
+export default config;
 ```
 
 ## Options
@@ -80,9 +83,25 @@ wrangler deploy
 The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with [`ctx`](https://developers.cloudflare.com/workers/runtime-apis/context/), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties), meaning that you can access it in hooks and endpoints:
 
 ```js
-// @errors: 7031
+// @filename: ambient.d.ts
+import { DurableObjectNamespace } from '@cloudflare/workers-types';
+
+declare global {
+	namespace App {
+		interface Platform {
+			env: {
+				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
+			};
+		}
+	}
+}
+// @filename: +server.js
+// ---cut---
+// @errors: 2355 2322
+/// file: +server.js
+/** @type {import('./$types').RequestHandler} */
 export async function POST({ request, platform }) {
-	const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
+	const x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
 }
 ```
 

documentation/docs/25-build-and-deploy/80-adapter-netlify.md

@@ -11,11 +11,11 @@ This adapter will be installed by default when you use [`adapter-auto`](adapter-
 Install with `npm i -D @sveltejs/adapter-netlify`, then add the adapter to your `svelte.config.js`:
 
 ```js
-// @errors: 2307
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-netlify';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		// default options are shown
 		adapter: adapter({
@@ -30,6 +30,8 @@ export default {
 		})
 	}
 };
+
+export default config;
 ```
 
 Then, make sure you have a [netlify.toml](https://docs.netlify.com/configure-builds/file-based-configuration) file in the project root. This will determine where to write static assets based on the `build.publish` settings, as per this sample configuration:
@@ -51,11 +53,11 @@ New projects will use the current Node LTS version by default. However, if you'r
 SvelteKit supports [Netlify Edge Functions](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/). If you pass the option `edge: true` to the `adapter` function, server-side rendering will happen in a Deno-based edge function that's deployed close to the site visitor. If set to `false` (the default), the site will deploy to Node-based Netlify Functions.
 
 ```js
-// @errors: 2307
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-netlify';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter({
 			// will create a Netlify Edge Function using Deno-based
@@ -64,6 +66,8 @@ export default {
 		})
 	}
 };
+
+export default config;
 ```
 
 ## Netlify alternatives to SvelteKit functionality
@@ -92,10 +96,15 @@ During compilation, redirect rules are automatically appended to your `_redirect
 With this adapter, SvelteKit endpoints are hosted as [Netlify Functions](https://docs.netlify.com/functions/overview/). Netlify function handlers have additional context, including [Netlify Identity](https://docs.netlify.com/visitor-access/identity/) information. You can access this context via the `event.platform.context` field inside your hooks and `+page.server` or `+layout.server` endpoints. These are [serverless functions](https://docs.netlify.com/functions/overview/) when the `edge` property is `false` in the adapter config or [edge functions](https://docs.netlify.com/edge-functions/overview/#app) when it is `true`.
 
 ```js
-// @errors: 2705 7006
+// @errors: 2339
+// @filename: ambient.d.ts
+/// <reference types="@sveltejs/adapter-netlify" />
+// @filename: +page.server.js
+// ---cut---
 /// file: +page.server.js
+/** @type {import('./$types').PageServerLoad} */
 export const load = async (event) => {
-	const context = event.platform.context;
+	const context = event.platform?.context;
 	console.log(context); // shows up in your functions log in the Netlify app
 };
 ```

documentation/docs/25-build-and-deploy/90-adapter-vercel.md

@@ -11,17 +11,19 @@ This adapter will be installed by default when you use [`adapter-auto`](adapter-
 Install with `npm i -D @sveltejs/adapter-vercel`, then add the adapter to your `svelte.config.js`:
 
 ```js
-// @errors: 2307 2345
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-vercel';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter({
 			// see below for options that can be set here
 		})
 	}
 };
+
+export default config;
 ```
 
 ## Deployment configuration
@@ -72,7 +74,8 @@ You may set the `images` config to control how Vercel builds your images. See th
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-vercel';
 
-export default {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
 	kit: {
 		adapter: adapter({
 			images: {
@@ -84,6 +87,8 @@ export default {
 		})
 	}
 };
+
+export default config;
 ```
 
 ## Incremental Static Regeneration
@@ -95,9 +100,9 @@ Vercel supports [Incremental Static Regeneration](https://vercel.com/docs/increm
 To add ISR to a route, include the `isr` property in your `config` object:
 
 ```js
-// @errors: 2664
 import { BYPASS_TOKEN } from '$env/static/private';
 
+/** @type {import('@sveltejs/adapter-vercel').Config} */
 export const config = {
 	isr: {
 		expiration: 60,
@@ -146,7 +151,6 @@ A list of valid query parameters that contribute to the cache key. Other paramet
 Vercel makes a set of [deployment-specific environment variables](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) available. Like other environment variables, these are accessible from `$env/static/private` and `$env/dynamic/private` (sometimes — more on that later), and inaccessible from their public counterparts. To access one of these variables from the client:
 
 ```js
-// @errors: 2305
 /// file: +layout.server.js
 import { VERCEL_COMMIT_REF } from '$env/static/private';