Skip to content

docs: add missing type information #13928

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions documentation/docs/20-core-concepts/30-form-actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 8 additions & 2 deletions documentation/docs/25-build-and-deploy/40-adapter-node.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -156,6 +160,8 @@ export default {
})
}
};

export default config;
```

### out
Expand Down
16 changes: 11 additions & 5 deletions documentation/docs/25-build-and-deploy/50-adapter-static.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -28,6 +28,8 @@ export default {
})
}
};

export default config;
```

...and add the [`prerender`](page-options#prerender) option to your root layout:
Expand All @@ -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
Expand Down Expand Up @@ -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';

Expand Down
6 changes: 4 additions & 2 deletions documentation/docs/25-build-and-deploy/55-single-page-apps.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
33 changes: 28 additions & 5 deletions documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -38,6 +39,8 @@ export default {
})
}
};

export default config;
```

## Options
Expand Down Expand Up @@ -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 [`context`](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');
}
```

Expand All @@ -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;
};+++
Expand Down Expand Up @@ -193,15 +212,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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 [`context`](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');
}
```

Expand Down
20 changes: 14 additions & 6 deletions documentation/docs/25-build-and-deploy/80-adapter-netlify.md
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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:
Expand All @@ -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
Expand All @@ -64,6 +66,8 @@ export default {
})
}
};

export default config;
```

## Netlify alternatives to SvelteKit functionality
Expand Down Expand Up @@ -92,10 +96,14 @@ 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
// @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
};
```
Expand Down
14 changes: 9 additions & 5 deletions documentation/docs/25-build-and-deploy/90-adapter-vercel.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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: {
Expand All @@ -84,6 +87,8 @@ export default {
})
}
};

export default config;
```

## Incremental Static Regeneration
Expand All @@ -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,
Expand Down Expand Up @@ -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';

Expand Down
Loading
Loading