Skip to content

Commit 858a238

Browse files
committed
add todo
1 parent d6ab3d8 commit 858a238

File tree

15 files changed

+137
-74
lines changed

15 files changed

+137
-74
lines changed

apps/svelte.dev/content/docs/kit/10-getting-started/30-project-structure.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ title: Project structure
55

66
A typical SvelteKit project looks like this:
77

8-
```bash
8+
```tree
99
my-project/
1010
├ src/
1111
│ ├ lib/

apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -470,6 +470,7 @@ Note that you need to `deserialize` the response before processing it further us
470470
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:
471471
472472
```js
473+
// @errors: 2532 2304
473474
const response = await fetch(this.action, {
474475
method: 'POST',
475476
body: data,

apps/svelte.dev/content/docs/kit/25-build-and-deploy/40-adapter-node.md

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,16 @@ Install with `npm i -D @sveltejs/adapter-node`, then add the adapter to your `sv
1111

1212
```js
1313
// @errors: 2307
14-
/// file: svelte.config.js
1514
import adapter from '@sveltejs/adapter-node';
1615

17-
export default {
16+
/** @type {import('@sveltejs/kit').Config} */
17+
const config = {
1818
kit: {
1919
adapter: adapter()
2020
}
2121
};
22+
23+
export default config;
2224
```
2325

2426
## Deploying
@@ -65,21 +67,21 @@ node +++--env-file=.env+++ build
6567

6668
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:
6769

68-
```
70+
```bash
6971
HOST=127.0.0.1 PORT=4000 node build
7072
```
7173

7274
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.
7375

74-
```
76+
```bash
7577
SOCKET_PATH=/tmp/socket node build
7678
```
7779

7880
### `ORIGIN`, `PROTOCOL_HEADER`, `HOST_HEADER`, and `PORT_HEADER`
7981

8082
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:
8183

82-
```
84+
```bash
8385
ORIGIN=https://my.site node build
8486

8587
# or e.g. for local previewing and testing
@@ -88,7 +90,7 @@ ORIGIN=http://localhost:3000 node build
8890

8991
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:
9092

91-
```
93+
```bash
9294
PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build
9395
```
9496

@@ -104,7 +106,7 @@ If `adapter-node` can't correctly determine the URL of your deployment, you may
104106

105107
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:
106108

107-
```
109+
```bash
108110
ADDRESS_HEADER=True-Client-IP node build
109111
```
110112

@@ -147,7 +149,8 @@ The adapter can be configured with various options:
147149
/// file: svelte.config.js
148150
import adapter from '@sveltejs/adapter-node';
149151

150-
export default {
152+
/** @type {import('@sveltejs/kit').Config} */
153+
const config = {
151154
kit: {
152155
adapter: adapter({
153156
// default options are shown
@@ -157,6 +160,8 @@ export default {
157160
})
158161
}
159162
};
163+
164+
export default config;
160165
```
161166

162167
### out
@@ -175,7 +180,7 @@ If you need to change the name of the environment variables used to configure th
175180
envPrefix: 'MY_CUSTOM_';
176181
```
177182

178-
```sh
183+
```bash
179184
MY_CUSTOM_HOST=127.0.0.1 \
180185
MY_CUSTOM_PORT=4000 \
181186
MY_CUSTOM_ORIGIN=https://my.site \

apps/svelte.dev/content/docs/kit/25-build-and-deploy/50-adapter-static.md

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ This will prerender your entire site as a collection of static files. If you'd l
1212
Install with `npm i -D @sveltejs/adapter-static`, then add the adapter to your `svelte.config.js`:
1313

1414
```js
15-
// @errors: 2307
1615
/// file: svelte.config.js
1716
import adapter from '@sveltejs/adapter-static';
1817

19-
export default {
18+
/** @type {import('@sveltejs/kit').Config} */
19+
const config = {
2020
kit: {
2121
adapter: adapter({
2222
// default options are shown. On some platforms
@@ -29,6 +29,8 @@ export default {
2929
})
3030
}
3131
};
32+
33+
export default config;
3234
```
3335

3436
...and add the [`prerender`](page-options#prerender) option to your root layout:
@@ -50,13 +52,17 @@ Some platforms have zero-config support (more to come in future):
5052
On these platforms, you should omit the adapter options so that `adapter-static` can provide the optimal configuration:
5153

5254
```js
53-
// @errors: 2304
5455
/// file: svelte.config.js
55-
export default {
56+
import adapter from '@sveltejs/adapter-static';
57+
58+
/** @type {import('@sveltejs/kit').Config} */
59+
const config = {
5660
kit: {
5761
adapter: adapter(---{...}---)
5862
}
5963
};
64+
65+
export default config;
6066
```
6167

6268
## Options
@@ -90,7 +96,7 @@ You'll also want to generate a fallback `404.html` page to replace the default 4
9096
A config for GitHub Pages might look like the following:
9197

9298
```js
93-
// @errors: 2307 2322
99+
// @errors: 2322
94100
/// file: svelte.config.js
95101
import adapter from '@sveltejs/adapter-static';
96102

apps/svelte.dev/content/docs/kit/25-build-and-deploy/55-single-page-apps.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,19 @@ If you don't have any server-side logic (i.e. `+page.server.js`, `+layout.server
1919
Install with `npm i -D @sveltejs/adapter-static`, then add the adapter to your `svelte.config.js` with the following options:
2020

2121
```js
22-
// @errors: 2307
2322
/// file: svelte.config.js
2423
import adapter from '@sveltejs/adapter-static';
2524

26-
export default {
25+
/** @type {import('@sveltejs/kit').Config} */
26+
const config = {
2727
kit: {
2828
adapter: adapter({
2929
fallback: '200.html' // may differ from host to host
3030
})
3131
}
3232
};
33+
34+
export default config;
3335
```
3436

3537
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.

apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ Install with `npm i -D @sveltejs/adapter-cloudflare`, then add the adapter to yo
2121
/// file: svelte.config.js
2222
import adapter from '@sveltejs/adapter-cloudflare';
2323

24-
export default {
24+
/** @type {import('@sveltejs/kit').Config} */
25+
const config = {
2526
kit: {
2627
adapter: adapter({
2728
// See below for an explanation of these options
@@ -39,6 +40,8 @@ export default {
3940
})
4041
}
4142
};
43+
44+
export default config;
4245
```
4346

4447
## Options
@@ -126,9 +129,25 @@ Functions contained in the [`/functions` directory](https://developers.cloudflar
126129
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:
127130

128131
```js
129-
// @errors: 7031
132+
// @filename: ambient.d.ts
133+
import { DurableObjectNamespace } from '@cloudflare/workers-types';
134+
135+
declare global {
136+
namespace App {
137+
interface Platform {
138+
env: {
139+
YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
140+
};
141+
}
142+
}
143+
}
144+
// @filename: +server.js
145+
// ---cut---
146+
// @errors: 2355 2322
147+
/// file: +server.js
148+
/** @type {import('./$types').RequestHandler} */
130149
export async function POST({ request, platform }) {
131-
const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
150+
const x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
132151
}
133152
```
134153
@@ -143,7 +162,7 @@ To make these types available to your app, install [`@cloudflare/workers-types`]
143162
declare global {
144163
namespace App {
145164
interface Platform {
146-
+++ env?: {
165+
+++ env: {
147166
YOUR_KV_NAMESPACE: KVNamespace;
148167
YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
149168
};+++
@@ -194,15 +213,19 @@ Cloudflare no longer recommends using [Workers Sites](https://developers.cloudfl
194213
### svelte.config.js
195214
196215
```js
216+
// @errors: 2307
197217
/// file: svelte.config.js
198218
---import adapter from '@sveltejs/adapter-cloudflare-workers';---
199219
+++import adapter from '@sveltejs/adapter-cloudflare';+++
200220

201-
export default {
221+
/** @type {import('@sveltejs/kit').Config} */
222+
const config = {
202223
kit: {
203224
adapter: adapter()
204225
}
205226
};
227+
228+
export default config;
206229
```
207230
208231
### wrangler.toml

apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,16 @@ Install with `npm i -D @sveltejs/adapter-cloudflare-workers`, then add the adapt
1616
/// file: svelte.config.js
1717
import adapter from '@sveltejs/adapter-cloudflare-workers';
1818

19-
export default {
19+
/** @type {import('@sveltejs/kit').Config} */
20+
const config = {
2021
kit: {
2122
adapter: adapter({
2223
// see below for options that can be set here
2324
})
2425
}
2526
};
27+
28+
export default config;
2629
```
2730

2831
## Options
@@ -65,14 +68,14 @@ https://dash.cloudflare.com/<your-account-id>/home
6568
6669
You will need to install [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/) and log in, if you haven't already:
6770

68-
```sh
71+
```bash
6972
npm i -D wrangler
7073
wrangler login
7174
```
7275

7376
Then, you can build your app and deploy it:
7477

75-
```sh
78+
```bash
7679
wrangler deploy
7780
```
7881

@@ -81,9 +84,25 @@ wrangler deploy
8184
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:
8285

8386
```js
84-
// @errors: 7031
87+
// @filename: ambient.d.ts
88+
import { DurableObjectNamespace } from '@cloudflare/workers-types';
89+
90+
declare global {
91+
namespace App {
92+
interface Platform {
93+
env: {
94+
YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
95+
};
96+
}
97+
}
98+
}
99+
// @filename: +server.js
100+
// ---cut---
101+
// @errors: 2355 2322
102+
/// file: +server.js
103+
/** @type {import('./$types').RequestHandler} */
85104
export async function POST({ request, platform }) {
86-
const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
105+
const x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
87106
}
88107
```
89108

apps/svelte.dev/content/docs/kit/25-build-and-deploy/80-adapter-netlify.md

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ This adapter will be installed by default when you use [`adapter-auto`](adapter-
1212
Install with `npm i -D @sveltejs/adapter-netlify`, then add the adapter to your `svelte.config.js`:
1313

1414
```js
15-
// @errors: 2307
1615
/// file: svelte.config.js
1716
import adapter from '@sveltejs/adapter-netlify';
1817

19-
export default {
18+
/** @type {import('@sveltejs/kit').Config} */
19+
const config = {
2020
kit: {
2121
// default options are shown
2222
adapter: adapter({
@@ -31,6 +31,8 @@ export default {
3131
})
3232
}
3333
};
34+
35+
export default config;
3436
```
3537

3638
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:
@@ -52,11 +54,11 @@ New projects will use the current Node LTS version by default. However, if you'r
5254
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.
5355

5456
```js
55-
// @errors: 2307
5657
/// file: svelte.config.js
5758
import adapter from '@sveltejs/adapter-netlify';
5859

59-
export default {
60+
/** @type {import('@sveltejs/kit').Config} */
61+
const config = {
6062
kit: {
6163
adapter: adapter({
6264
// will create a Netlify Edge Function using Deno-based
@@ -65,6 +67,8 @@ export default {
6567
})
6668
}
6769
};
70+
71+
export default config;
6872
```
6973

7074
## Netlify alternatives to SvelteKit functionality
@@ -93,10 +97,14 @@ During compilation, redirect rules are automatically appended to your `_redirect
9397
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`.
9498

9599
```js
96-
// @errors: 2705 7006
100+
// @filename: ambient.d.ts
101+
/// <reference types="@sveltejs/adapter-netlify" />
102+
// @filename: +page.server.js
103+
// ---cut---
97104
/// file: +page.server.js
105+
/** @type {import('./$types').PageServerLoad} */
98106
export const load = async (event) => {
99-
const context = event.platform.context;
107+
const context = event.platform?.context;
100108
console.log(context); // shows up in your functions log in the Netlify app
101109
};
102110
```

0 commit comments

Comments
 (0)