From 6c16d9fed766295393aaa3c5e78b7cd6d18d1c12 Mon Sep 17 00:00:00 2001 From: Chew Tee Ming Date: Wed, 25 Jun 2025 14:31:12 +0800 Subject: [PATCH 1/4] add types --- .../25-build-and-deploy/40-adapter-node.md | 12 +++--- .../25-build-and-deploy/50-adapter-static.md | 1 + .../55-single-page-apps.md | 1 + .../60-adapter-cloudflare.md | 4 ++ .../70-adapter-cloudflare-workers.md | 3 ++ .../25-build-and-deploy/80-adapter-netlify.md | 3 ++ .../25-build-and-deploy/90-adapter-vercel.md | 3 ++ .../docs/30-advanced/40-service-workers.md | 43 ++++++++----------- .../docs/60-appendix/20-integrations.md | 1 + 9 files changed, 40 insertions(+), 31 deletions(-) diff --git a/documentation/docs/25-build-and-deploy/40-adapter-node.md b/documentation/docs/25-build-and-deploy/40-adapter-node.md index ce0a5bccf95f..a47ba3554568 100644 --- a/documentation/docs/25-build-and-deploy/40-adapter-node.md +++ b/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,13 +65,13 @@ 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 ``` @@ -78,7 +79,7 @@ SOCKET_PATH=/tmp/socket node build 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({ diff --git a/documentation/docs/25-build-and-deploy/50-adapter-static.md b/documentation/docs/25-build-and-deploy/50-adapter-static.md index c1d4845af154..83e68b288cde 100644 --- a/documentation/docs/25-build-and-deploy/50-adapter-static.md +++ b/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({ diff --git a/documentation/docs/25-build-and-deploy/55-single-page-apps.md b/documentation/docs/25-build-and-deploy/55-single-page-apps.md index 9747c4288a51..c790ed3b2abb 100644 --- a/documentation/docs/25-build-and-deploy/55-single-page-apps.md +++ b/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({ diff --git a/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md b/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md index 665214fb718b..3ef77291a0c3 100644 --- a/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md +++ b/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() diff --git a/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md b/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md index 942f57fed034..e8f912732175 100644 --- a/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md +++ b/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'); } diff --git a/documentation/docs/25-build-and-deploy/80-adapter-netlify.md b/documentation/docs/25-build-and-deploy/80-adapter-netlify.md index 75f2203df301..7a72f89ad79e 100644 --- a/documentation/docs/25-build-and-deploy/80-adapter-netlify.md +++ b/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 diff --git a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md b/documentation/docs/25-build-and-deploy/90-adapter-vercel.md index 58e8079cda27..5f3e80a24995 100644 --- a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md +++ b/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, diff --git a/documentation/docs/30-advanced/40-service-workers.md b/documentation/docs/30-advanced/40-service-workers.md index f57dba4abc7e..9d6087f8f882 100644 --- a/documentation/docs/30-advanced/40-service-workers.md +++ b/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 +/// +/// +/// +// Ensures that the `$service-worker` import has proper type definitions /// +// Only necessary if you have an import from `$env/static/public` +/// + 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 -/// -/// -/// -/// - -const sw = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (self)); -``` -```generated-ts -/// -/// -/// -/// - -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 `/// ` 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). diff --git a/documentation/docs/60-appendix/20-integrations.md b/documentation/docs/60-appendix/20-integrations.md index a4213c44da4a..80f452e72b63 100644 --- a/documentation/docs/60-appendix/20-integrations.md +++ b/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()] }; From 53d575c1a5bc39a3b319b830d0e0c2bbb9fe9492 Mon Sep 17 00:00:00 2001 From: Chew Tee Ming Date: Thu, 26 Jun 2025 09:53:58 +0800 Subject: [PATCH 2/4] align config export and replace sh with bash --- .../25-build-and-deploy/40-adapter-node.md | 20 +++++++++++-------- .../25-build-and-deploy/50-adapter-static.md | 8 ++++++-- .../55-single-page-apps.md | 4 +++- .../60-adapter-cloudflare.md | 8 ++++++-- .../70-adapter-cloudflare-workers.md | 8 +++++--- .../25-build-and-deploy/80-adapter-netlify.md | 8 ++++++-- .../25-build-and-deploy/90-adapter-vercel.md | 10 +++++++--- .../docs/30-advanced/70-packaging.md | 2 +- documentation/docs/60-appendix/10-faq.md | 4 ++-- .../docs/60-appendix/20-integrations.md | 4 +++- 10 files changed, 51 insertions(+), 25 deletions(-) diff --git a/documentation/docs/25-build-and-deploy/40-adapter-node.md b/documentation/docs/25-build-and-deploy/40-adapter-node.md index a47ba3554568..10386c23b278 100644 --- a/documentation/docs/25-build-and-deploy/40-adapter-node.md +++ b/documentation/docs/25-build-and-deploy/40-adapter-node.md @@ -14,11 +14,13 @@ Install with `npm i -D @sveltejs/adapter-node`, then add the adapter to your `sv import adapter from '@sveltejs/adapter-node'; /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { kit: { adapter: adapter() } }; + +export default config; ``` ## Deploying @@ -65,13 +67,13 @@ 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 +```bash 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 +```bash SOCKET_PATH=/tmp/socket node build ``` @@ -79,7 +81,7 @@ SOCKET_PATH=/tmp/socket node build 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 +```bash ORIGIN=https://my.site node build # or e.g. for local previewing and testing @@ -88,7 +90,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 +```bash PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build ``` @@ -104,7 +106,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 +```bash ADDRESS_HEADER=True-Client-IP node build ``` @@ -148,7 +150,7 @@ The adapter can be configured with various options: import adapter from '@sveltejs/adapter-node'; /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { kit: { adapter: adapter({ // default options are shown @@ -158,6 +160,8 @@ export default { }) } }; + +export default config; ``` ### out @@ -176,7 +180,7 @@ If you need to change the name of the environment variables used to configure th envPrefix: 'MY_CUSTOM_'; ``` -```sh +```bash MY_CUSTOM_HOST=127.0.0.1 \ MY_CUSTOM_PORT=4000 \ MY_CUSTOM_ORIGIN=https://my.site \ diff --git a/documentation/docs/25-build-and-deploy/50-adapter-static.md b/documentation/docs/25-build-and-deploy/50-adapter-static.md index 83e68b288cde..0ac6e1cdff87 100644 --- a/documentation/docs/25-build-and-deploy/50-adapter-static.md +++ b/documentation/docs/25-build-and-deploy/50-adapter-static.md @@ -16,7 +16,7 @@ Install with `npm i -D @sveltejs/adapter-static`, then add the adapter to your ` import adapter from '@sveltejs/adapter-static'; /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { kit: { adapter: adapter({ // default options are shown. On some platforms @@ -29,6 +29,8 @@ export default { }) } }; + +export default config; ``` ...and add the [`prerender`](page-options#prerender) option to your root layout: @@ -52,11 +54,13 @@ On these platforms, you should omit the adapter options so that `adapter-static` ```js // @errors: 2304 /// file: svelte.config.js -export default { +const config = { kit: { adapter: adapter(---{...}---) } }; + +export default config; ``` ## Options diff --git a/documentation/docs/25-build-and-deploy/55-single-page-apps.md b/documentation/docs/25-build-and-deploy/55-single-page-apps.md index c790ed3b2abb..8f27f41bc179 100644 --- a/documentation/docs/25-build-and-deploy/55-single-page-apps.md +++ b/documentation/docs/25-build-and-deploy/55-single-page-apps.md @@ -23,13 +23,15 @@ Install with `npm i -D @sveltejs/adapter-static`, then add the adapter to your ` import adapter from '@sveltejs/adapter-static'; /** @type {import('@sveltejs/kit').Config} */ -export default { +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. diff --git a/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md b/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md index 3ef77291a0c3..ada72198cb4e 100644 --- a/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md +++ b/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md @@ -21,7 +21,7 @@ Install with `npm i -D @sveltejs/adapter-cloudflare`, then add the adapter to yo import adapter from '@sveltejs/adapter-cloudflare'; /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { kit: { adapter: adapter({ // See below for an explanation of these options @@ -39,6 +39,8 @@ export default { }) } }; + +export default config; ``` ## Options @@ -201,11 +203,13 @@ Cloudflare no longer recommends using [Workers Sites](https://developers.cloudfl +++import adapter from '@sveltejs/adapter-cloudflare';+++ /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { kit: { adapter: adapter() } }; + +export default config; ``` ### wrangler.toml diff --git a/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md b/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md index e8f912732175..bc617e64ced9 100644 --- a/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md +++ b/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md @@ -16,13 +16,15 @@ Install with `npm i -D @sveltejs/adapter-cloudflare-workers`, then add the adapt import adapter from '@sveltejs/adapter-cloudflare-workers'; /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { kit: { adapter: adapter({ // see below for options that can be set here }) } }; + +export default config; ``` ## Options @@ -65,14 +67,14 @@ https://dash.cloudflare.com//home You will need to install [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/) and log in, if you haven't already: -```sh +```bash npm i -D wrangler wrangler login ``` Then, you can build your app and deploy it: -```sh +```bash wrangler deploy ``` diff --git a/documentation/docs/25-build-and-deploy/80-adapter-netlify.md b/documentation/docs/25-build-and-deploy/80-adapter-netlify.md index 7a72f89ad79e..282e0a16f540 100644 --- a/documentation/docs/25-build-and-deploy/80-adapter-netlify.md +++ b/documentation/docs/25-build-and-deploy/80-adapter-netlify.md @@ -16,7 +16,7 @@ Install with `npm i -D @sveltejs/adapter-netlify`, then add the adapter to your import adapter from '@sveltejs/adapter-netlify'; /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { kit: { // default options are shown adapter: adapter({ @@ -31,6 +31,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: @@ -57,7 +59,7 @@ SvelteKit supports [Netlify Edge Functions](https://docs.netlify.com/netlify-lab import adapter from '@sveltejs/adapter-netlify'; /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { kit: { adapter: adapter({ // will create a Netlify Edge Function using Deno-based @@ -66,6 +68,8 @@ export default { }) } }; + +export default config; ``` ## Netlify alternatives to SvelteKit functionality diff --git a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md b/documentation/docs/25-build-and-deploy/90-adapter-vercel.md index 5f3e80a24995..c71d17ba1b47 100644 --- a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md +++ b/documentation/docs/25-build-and-deploy/90-adapter-vercel.md @@ -16,13 +16,15 @@ Install with `npm i -D @sveltejs/adapter-vercel`, then add the adapter to your ` import adapter from '@sveltejs/adapter-vercel'; /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { kit: { adapter: adapter({ // see below for options that can be set here }) } }; + +export default config; ``` ## Deployment configuration @@ -74,7 +76,7 @@ You may set the `images` config to control how Vercel builds your images. See th import adapter from '@sveltejs/adapter-vercel'; /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { kit: { adapter: adapter({ images: { @@ -86,6 +88,8 @@ export default { }) } }; + +export default config; ``` ## Incremental Static Regeneration @@ -134,7 +138,7 @@ Set this string as an environment variable on Vercel by logging in and going to To get this key known about for local development, you can use the [Vercel CLI](https://vercel.com/docs/cli/env) by running the `vercel env pull` command locally like so: -```sh +```bash vercel env pull .env.development.local ``` diff --git a/documentation/docs/30-advanced/70-packaging.md b/documentation/docs/30-advanced/70-packaging.md index 93294e3f2616..285094390c94 100644 --- a/documentation/docs/30-advanced/70-packaging.md +++ b/documentation/docs/30-advanced/70-packaging.md @@ -249,7 +249,7 @@ You can create so-called declaration maps (`d.ts.map` files) by setting `"declar To publish the generated package: -```sh +```bash npm publish ``` diff --git a/documentation/docs/60-appendix/10-faq.md b/documentation/docs/60-appendix/10-faq.md index 5caa0f5b7b9f..94ebe4950cec 100644 --- a/documentation/docs/60-appendix/10-faq.md +++ b/documentation/docs/60-appendix/10-faq.md @@ -195,14 +195,14 @@ Currently ESM Support within the latest Yarn (version 3) is considered [experime The below seems to work although your results may vary. First create a new application: -```sh +```bash yarn create svelte myapp cd myapp ``` And enable Yarn Berry: -```sh +```bash yarn set version berry yarn install ``` diff --git a/documentation/docs/60-appendix/20-integrations.md b/documentation/docs/60-appendix/20-integrations.md index 80f452e72b63..4d9db6be59d2 100644 --- a/documentation/docs/60-appendix/20-integrations.md +++ b/documentation/docs/60-appendix/20-integrations.md @@ -11,9 +11,11 @@ Including [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; /** @type {import('@sveltejs/kit').Config} */ -export default { +const config = { preprocess: [vitePreprocess()] }; + +export default config; ``` You will also need to use a preprocessor if you're using TypeScript with Svelte 4. TypeScript is supported natively in Svelte 5 if you're using only the type syntax. To use more complex TypeScript syntax in Svelte 5, you will need still need a preprocessor and can use `vitePreprocess({ script: true })`. From 96c77850c2135b8a124dbda39cf2d810b93d444f Mon Sep 17 00:00:00 2001 From: Chew Tee Ming Date: Thu, 26 Jun 2025 14:04:50 +0800 Subject: [PATCH 3/4] type errors to go with new type fixes in svelte.dev --- .../30-project-structure.md | 2 +- .../docs/20-core-concepts/30-form-actions.md | 1 + .../25-build-and-deploy/50-adapter-static.md | 7 ++++--- .../55-single-page-apps.md | 1 - .../60-adapter-cloudflare.md | 21 ++++++++++++++++--- .../70-adapter-cloudflare-workers.md | 18 ++++++++++++++-- .../25-build-and-deploy/80-adapter-netlify.md | 9 ++++---- .../25-build-and-deploy/90-adapter-vercel.md | 3 --- documentation/docs/30-advanced/20-hooks.md | 8 +++---- .../docs/30-advanced/40-service-workers.md | 1 - 10 files changed, 49 insertions(+), 22 deletions(-) diff --git a/documentation/docs/10-getting-started/30-project-structure.md b/documentation/docs/10-getting-started/30-project-structure.md index 0d9e64141723..64bae0a695c1 100644 --- a/documentation/docs/10-getting-started/30-project-structure.md +++ b/documentation/docs/10-getting-started/30-project-structure.md @@ -4,7 +4,7 @@ title: Project structure A typical SvelteKit project looks like this: -```bash +```tree my-project/ ├ src/ │ ├ lib/ diff --git a/documentation/docs/20-core-concepts/30-form-actions.md b/documentation/docs/20-core-concepts/30-form-actions.md index 8dc852b985c0..48bd968bf87e 100644 --- a/documentation/docs/20-core-concepts/30-form-actions.md +++ b/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, diff --git a/documentation/docs/25-build-and-deploy/50-adapter-static.md b/documentation/docs/25-build-and-deploy/50-adapter-static.md index 0ac6e1cdff87..7c09daf155ae 100644 --- a/documentation/docs/25-build-and-deploy/50-adapter-static.md +++ b/documentation/docs/25-build-and-deploy/50-adapter-static.md @@ -11,7 +11,6 @@ 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'; @@ -52,8 +51,10 @@ 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 +import adapter from '@sveltejs/adapter-static'; + +/** @type {import('@sveltejs/kit').Config} */ const config = { kit: { adapter: adapter(---{...}---) @@ -94,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'; diff --git a/documentation/docs/25-build-and-deploy/55-single-page-apps.md b/documentation/docs/25-build-and-deploy/55-single-page-apps.md index 8f27f41bc179..8367f88fbef6 100644 --- a/documentation/docs/25-build-and-deploy/55-single-page-apps.md +++ b/documentation/docs/25-build-and-deploy/55-single-page-apps.md @@ -18,7 +18,6 @@ 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'; diff --git a/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md b/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md index ada72198cb4e..58cbe799fad0 100644 --- a/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md +++ b/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md @@ -128,11 +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'); } ``` @@ -147,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; };+++ @@ -198,6 +212,7 @@ 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';+++ diff --git a/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md b/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md index bc617e64ced9..a8a0ffe5e53c 100644 --- a/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md +++ b/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md @@ -83,11 +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'); } ``` diff --git a/documentation/docs/25-build-and-deploy/80-adapter-netlify.md b/documentation/docs/25-build-and-deploy/80-adapter-netlify.md index 282e0a16f540..26262314c338 100644 --- a/documentation/docs/25-build-and-deploy/80-adapter-netlify.md +++ b/documentation/docs/25-build-and-deploy/80-adapter-netlify.md @@ -11,7 +11,6 @@ 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'; @@ -54,7 +53,6 @@ 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'; @@ -98,11 +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 +/// +// @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 }; ``` diff --git a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md b/documentation/docs/25-build-and-deploy/90-adapter-vercel.md index c71d17ba1b47..b09e2460dc36 100644 --- a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md +++ b/documentation/docs/25-build-and-deploy/90-adapter-vercel.md @@ -11,7 +11,6 @@ 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'; @@ -101,7 +100,6 @@ 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} */ @@ -153,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'; diff --git a/documentation/docs/30-advanced/20-hooks.md b/documentation/docs/30-advanced/20-hooks.md index 4a2239ad2240..04d9bf5967ad 100644 --- a/documentation/docs/30-advanced/20-hooks.md +++ b/documentation/docs/30-advanced/20-hooks.md @@ -249,6 +249,7 @@ This function runs once, when the server is created or the app starts in the bro > [!NOTE] If your environment supports top-level await, the `init` function is really no different from writing your initialisation logic at the top level of the module, but some environments — most notably, Safari — don't. ```js +// @errors: 2307 /// file: src/hooks.server.js import * as db from '$lib/server/database'; @@ -272,9 +273,8 @@ This function runs before `handle` and allows you to change how URLs are transla For example, you might have a `src/routes/[[lang]]/about/+page.svelte` page, which should be accessible as `/en/about` or `/de/ueber-uns` or `/fr/a-propos`. You could implement this with `reroute`: ```js +// @errors: 2345 2304 /// file: src/hooks.js -// @errors: 2345 -// @errors: 2304 /** @type {Record} */ const translated = { @@ -298,9 +298,8 @@ Using `reroute` will _not_ change the contents of the browser's address bar, or Since version 2.18, the `reroute` hook can be asynchronous, allowing it to (for example) fetch data from your backend to decide where to reroute to. Use this carefully and make sure it's fast, as it will delay navigation otherwise. If you need to fetch data, use the `fetch` provided as an argument. It has the [same benefits](load#Making-fetch-requests) as the `fetch` provided to `load` functions, with the caveat that `params` and `id` are unavailable to [`handleFetch`](#Server-hooks-handleFetch) because the route is not yet known. ```js +// @errors: 2345 2304 /// file: src/hooks.js -// @errors: 2345` -// @errors: 2304 /** @type {import('@sveltejs/kit').Reroute} */ export async function reroute({ url, fetch }) { @@ -323,6 +322,7 @@ export async function reroute({ url, fetch }) { This is a collection of _transporters_, which allow you to pass custom types — returned from `load` and form actions — across the server/client boundary. Each transporter contains an `encode` function, which encodes values on the server (or returns a falsy value for anything that isn't an instance of the type) and a corresponding `decode` function: ```js +// @errors: 2307 /// file: src/hooks.js import { Vector } from '$lib/math'; diff --git a/documentation/docs/30-advanced/40-service-workers.md b/documentation/docs/30-advanced/40-service-workers.md index 9d6087f8f882..23aea04e56e7 100644 --- a/documentation/docs/30-advanced/40-service-workers.md +++ b/documentation/docs/30-advanced/40-service-workers.md @@ -23,7 +23,6 @@ Inside the service worker you have access to the [`$service-worker` module]($ser The following example caches the built app and any files in `static` eagerly, and caches all other requests as they happen. This would make each page work offline once visited. ```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 From d6cc6ec2361bddb54878b46ff998e4c0d2966964 Mon Sep 17 00:00:00 2001 From: Chew Tee Ming Date: Mon, 30 Jun 2025 09:53:53 +0800 Subject: [PATCH 4/4] separate syntax highlighting into a different pr --- .../docs/10-getting-started/30-project-structure.md | 2 +- .../docs/25-build-and-deploy/40-adapter-node.md | 12 ++++++------ .../70-adapter-cloudflare-workers.md | 4 ++-- .../docs/25-build-and-deploy/90-adapter-vercel.md | 2 +- documentation/docs/30-advanced/70-packaging.md | 2 +- documentation/docs/60-appendix/10-faq.md | 4 ++-- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/documentation/docs/10-getting-started/30-project-structure.md b/documentation/docs/10-getting-started/30-project-structure.md index 64bae0a695c1..0d9e64141723 100644 --- a/documentation/docs/10-getting-started/30-project-structure.md +++ b/documentation/docs/10-getting-started/30-project-structure.md @@ -4,7 +4,7 @@ title: Project structure A typical SvelteKit project looks like this: -```tree +```bash my-project/ ├ src/ │ ├ lib/ diff --git a/documentation/docs/25-build-and-deploy/40-adapter-node.md b/documentation/docs/25-build-and-deploy/40-adapter-node.md index 10386c23b278..1ab9a5e814b0 100644 --- a/documentation/docs/25-build-and-deploy/40-adapter-node.md +++ b/documentation/docs/25-build-and-deploy/40-adapter-node.md @@ -67,13 +67,13 @@ 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: -```bash +``` 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. -```bash +``` SOCKET_PATH=/tmp/socket node build ``` @@ -81,7 +81,7 @@ SOCKET_PATH=/tmp/socket node build 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: -```bash +``` ORIGIN=https://my.site node build # or e.g. for local previewing and testing @@ -90,7 +90,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: -```bash +``` PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host node build ``` @@ -106,7 +106,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: -```bash +``` ADDRESS_HEADER=True-Client-IP node build ``` @@ -180,7 +180,7 @@ If you need to change the name of the environment variables used to configure th envPrefix: 'MY_CUSTOM_'; ``` -```bash +```sh MY_CUSTOM_HOST=127.0.0.1 \ MY_CUSTOM_PORT=4000 \ MY_CUSTOM_ORIGIN=https://my.site \ diff --git a/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md b/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md index a8a0ffe5e53c..c97349f40093 100644 --- a/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md +++ b/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md @@ -67,14 +67,14 @@ https://dash.cloudflare.com//home You will need to install [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/) and log in, if you haven't already: -```bash +```sh npm i -D wrangler wrangler login ``` Then, you can build your app and deploy it: -```bash +```sh wrangler deploy ``` diff --git a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md b/documentation/docs/25-build-and-deploy/90-adapter-vercel.md index b09e2460dc36..36666fdd75ce 100644 --- a/documentation/docs/25-build-and-deploy/90-adapter-vercel.md +++ b/documentation/docs/25-build-and-deploy/90-adapter-vercel.md @@ -136,7 +136,7 @@ Set this string as an environment variable on Vercel by logging in and going to To get this key known about for local development, you can use the [Vercel CLI](https://vercel.com/docs/cli/env) by running the `vercel env pull` command locally like so: -```bash +```sh vercel env pull .env.development.local ``` diff --git a/documentation/docs/30-advanced/70-packaging.md b/documentation/docs/30-advanced/70-packaging.md index 285094390c94..93294e3f2616 100644 --- a/documentation/docs/30-advanced/70-packaging.md +++ b/documentation/docs/30-advanced/70-packaging.md @@ -249,7 +249,7 @@ You can create so-called declaration maps (`d.ts.map` files) by setting `"declar To publish the generated package: -```bash +```sh npm publish ``` diff --git a/documentation/docs/60-appendix/10-faq.md b/documentation/docs/60-appendix/10-faq.md index 94ebe4950cec..5caa0f5b7b9f 100644 --- a/documentation/docs/60-appendix/10-faq.md +++ b/documentation/docs/60-appendix/10-faq.md @@ -195,14 +195,14 @@ Currently ESM Support within the latest Yarn (version 3) is considered [experime The below seems to work although your results may vary. First create a new application: -```bash +```sh yarn create svelte myapp cd myapp ``` And enable Yarn Berry: -```bash +```sh yarn set version berry yarn install ```