add types

Author: eltigerchino

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

@@ -13,6 +13,7 @@ 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';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		adapter: adapter()
@@ -64,21 +65,21 @@ node +++--env-file=.env+++ build
 
 By default, the server will accept connections on `0.0.0.0` using port 3000. These can be customised with the `PORT` and `HOST` environment variables:
 
-```
+```sh
 HOST=127.0.0.1 PORT=4000 node build
 ```
 
 Alternatively, the server can be configured to accept connections on a specified socket path. When this is done using the `SOCKET_PATH` environment variable, the `HOST` and `PORT` environment variables will be disregarded.
 
-```
+```sh
 SOCKET_PATH=/tmp/socket node build
 ```
 
 ### `ORIGIN`, `PROTOCOL_HEADER`, `HOST_HEADER`, and `PORT_HEADER`
 
 HTTP doesn't give SvelteKit a reliable way to know the URL that is currently being requested. The simplest way to tell SvelteKit where the app is being served is to set the `ORIGIN` environment variable:
 
-```
+```sh
 ORIGIN=https://my.site node build
 
 # or e.g. for local previewing and testing
@@ -87,7 +88,7 @@ ORIGIN=http://localhost:3000 node build
 
 With this, a request for the `/stuff` pathname will correctly resolve to `https://my.site/stuff`. Alternatively, you can specify headers that tell SvelteKit about the request protocol and host, from which it can construct the origin URL:
 
-```
+```sh
 PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build
 ```
 
@@ -103,7 +104,7 @@ If `adapter-node` can't correctly determine the URL of your deployment, you may
 
 The [`RequestEvent`](@sveltejs-kit#RequestEvent) object passed to hooks and endpoints includes an `event.getClientAddress()` function that returns the client's IP address. By default this is the connecting `remoteAddress`. If your server is behind one or more proxies (such as a load balancer), this value will contain the innermost proxy's IP address rather than the client's, so we need to specify an `ADDRESS_HEADER` to read the address from:
 
-```
+```sh
 ADDRESS_HEADER=True-Client-IP node build
 ```
 
@@ -146,6 +147,7 @@ The adapter can be configured with various options:
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-node';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		adapter: adapter({

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

@@ -15,6 +15,7 @@ Install with `npm i -D @sveltejs/adapter-static`, then add the adapter to your `
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-static';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		adapter: adapter({

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

@@ -22,6 +22,7 @@ Install with `npm i -D @sveltejs/adapter-static`, then add the adapter to your `
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-static';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		adapter: adapter({

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

@@ -20,6 +20,7 @@ Install with `npm i -D @sveltejs/adapter-cloudflare`, then add the adapter to yo
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-cloudflare';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		adapter: adapter({
@@ -126,6 +127,8 @@ The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#p
 
 ```js
 // @errors: 7031
+/// file: +server.js
+/** @type {import('./$types').RequestHandler} */
 export async function POST({ request, platform }) {
 	const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
 }
@@ -197,6 +200,7 @@ Cloudflare no longer recommends using [Workers Sites](https://developers.cloudfl
 ---import adapter from '@sveltejs/adapter-cloudflare-workers';---
 +++import adapter from '@sveltejs/adapter-cloudflare';+++
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		adapter: adapter()

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

@@ -15,6 +15,7 @@ Install with `npm i -D @sveltejs/adapter-cloudflare-workers`, then add the adapt
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-cloudflare-workers';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		adapter: adapter({
@@ -81,6 +82,8 @@ The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#p
 
 ```js
 // @errors: 7031
+/// file: +server.js
+/** @type {import('./$types').RequestHandler} */
 export async function POST({ request, platform }) {
 	const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
 }

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

@@ -15,6 +15,7 @@ Install with `npm i -D @sveltejs/adapter-netlify`, then add the adapter to your
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-netlify';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		// default options are shown
@@ -55,6 +56,7 @@ SvelteKit supports [Netlify Edge Functions](https://docs.netlify.com/netlify-lab
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-netlify';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		adapter: adapter({
@@ -94,6 +96,7 @@ With this adapter, SvelteKit endpoints are hosted as [Netlify Functions](https:/
 ```js
 // @errors: 2705 7006
 /// file: +page.server.js
+/** @type {import('./$types').PageServerLoad} */
 export const load = async (event) => {
 	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

@@ -15,6 +15,7 @@ Install with `npm i -D @sveltejs/adapter-vercel`, then add the adapter to your `
 /// file: svelte.config.js
 import adapter from '@sveltejs/adapter-vercel';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		adapter: adapter({
@@ -72,6 +73,7 @@ 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';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
 		adapter: adapter({
@@ -98,6 +100,7 @@ To add ISR to a route, include the `isr` property in your `config` object:
 // @errors: 2664
 import { BYPASS_TOKEN } from '$env/static/private';
 
+/** @type {import('@sveltejs/adapter-vercel').Config} */
 export const config = {
 	isr: {
 		expiration: 60,

documentation/docs/30-advanced/40-service-workers.md

@@ -24,9 +24,23 @@ The following example caches the built app and any files in `static` eagerly, an
 
 ```js
 // @errors: 2339
+/// file: src/service-worker.js
+// Disables access to DOM typings like `HTMLElement` which are not available
+// inside a service worker and instantiates the correct globals
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
+// Ensures that the `$service-worker` import has proper type definitions
 /// <reference types="@sveltejs/kit" />
+// Only necessary if you have an import from `$env/static/public`
+/// <reference types="../.svelte-kit/ambient.d.ts" />
+
 import { build, files, version } from '$service-worker';
 
+// The reassignment of `self` to `sw` allows you to type cast it in the process
+// (this is the easiest way to do it without needing additional files)
+const sw = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (self));
+
 // Create a unique cache name for this deployment
 const CACHE = `cache-${version}`;
 
@@ -35,7 +49,7 @@ const ASSETS = [
 	...files  // everything in `static`
 ];
 
-self.addEventListener('install', (event) => {
+sw.addEventListener('install', (event) => {
 	// Create a new cache and add all files to it
 	async function addFilesToCache() {
 		const cache = await caches.open(CACHE);
@@ -45,7 +59,7 @@ self.addEventListener('install', (event) => {
 	event.waitUntil(addFilesToCache());
 });
 
-self.addEventListener('activate', (event) => {
+sw.addEventListener('activate', (event) => {
 	// Remove previous cached data from disk
 	async function deleteOldCaches() {
 		for (const key of await caches.keys()) {
@@ -56,7 +70,7 @@ self.addEventListener('activate', (event) => {
 	event.waitUntil(deleteOldCaches());
 });
 
-self.addEventListener('fetch', (event) => {
+sw.addEventListener('fetch', (event) => {
 	// ignore POST requests etc
 	if (event.request.method !== 'GET') return;
 
@@ -122,29 +136,6 @@ navigator.serviceWorker.register('/service-worker.js', {
 
 > [!NOTE] `build` and `prerendered` are empty arrays during development
 
-## Type safety
-
-Setting up proper types for service workers requires some manual setup. Inside your `service-worker.js`, add the following to the top of your file:
-
-```original-js
-/// <reference types="@sveltejs/kit" />
-/// <reference no-default-lib="true"/>
-/// <reference lib="esnext" />
-/// <reference lib="webworker" />
-
-const sw = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (self));
-```
-```generated-ts
-/// <reference types="@sveltejs/kit" />
-/// <reference no-default-lib="true"/>
-/// <reference lib="esnext" />
-/// <reference lib="webworker" />
-
-const sw = self as unknown as ServiceWorkerGlobalScope;
-```
-
-This disables access to DOM typings like `HTMLElement` which are not available inside a service worker and instantiates the correct globals. The reassignment of `self` to `sw` allows you to type cast it in the process (there are a couple of ways to do this, but this is the easiest that requires no additional files). Use `sw` instead of `self` in the rest of the file. The reference to the SvelteKit types ensures that the `$service-worker` import has proper type definitions. If you import `$env/static/public` you either have to `// @ts-ignore` the import or add `/// <reference types="../.svelte-kit/ambient.d.ts" />` to the reference types.
-
 ## Other solutions
 
 SvelteKit's service worker implementation is designed to be easy to work with and is probably a good solution for most users. However, outside of SvelteKit, many PWA applications leverage the [Workbox](https://web.dev/learn/pwa/workbox) library. If you're used to using Workbox you may prefer [Vite PWA plugin](https://vite-pwa-org.netlify.app/frameworks/sveltekit.html).

documentation/docs/60-appendix/20-integrations.md

@@ -10,6 +10,7 @@ Including [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob
 // svelte.config.js
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
+/** @type {import('@sveltejs/kit').Config} */
 export default {
   preprocess: [vitePreprocess()]
 };