Skip to content
Open
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
6 changes: 6 additions & 0 deletions .changeset/fuzzy-kings-sit.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@sveltejs/adapter-cloudflare": major
---

breaking: remove cloudflare `platform`, emulate the `cloudflare:workers` module instead

56 changes: 14 additions & 42 deletions documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Cloudflare

To deploy to [Cloudflare Workers](https://workers.cloudflare.com/) or [Cloudflare Pages](https://pages.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).

This adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that `event.platform` is emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.
This adapter will be installed by default when you use [`adapter-auto`](adapter-auto). If you plan on staying with Cloudflare, you can switch from [`adapter-auto`](adapter-auto) to using this adapter directly so that `cloudflare:workers` is emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.

## Comparisons

Expand Down Expand Up @@ -53,7 +53,7 @@ Path to your [Wrangler configuration file](https://developers.cloudflare.com/wor

### platformProxy

Preferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options.
Preferences for the emulated `env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#parameters-1) Wrangler API documentation for a full list of options.

### fallback

Expand Down Expand Up @@ -130,62 +130,34 @@ Functions contained in the [`/functions` directory](https://developers.cloudflar

## Runtime APIs

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:
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 available on the [`cloudflare:workers`](https://developers.cloudflare.com/workers/runtime-apis/bindings/#importing-env-as-a-global) module.

```js
/// file: +server.js
// @filename: ambient.d.ts
import { DurableObjectNamespace } from '@cloudflare/workers-types';

declare global {
namespace App {
interface Platform {
env: {
YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
};
}
}
declare module 'cloudflare:workers' {
export const env: {
YOUR_DURABLE_OBJECT_NAMESPACE: import('@cloudflare/workers-types').DurableObjectNamespace;
};
Comment thread
ottomated marked this conversation as resolved.
}
// @filename: +server.js
// ---cut---
// @errors: 2355 2322
/// file: +server.js
import { env } from 'cloudflare:workers';

/** @type {import('./$types').RequestHandler} */
export async function POST({ request, platform }) {
const x = platform?.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
export async function POST() {
const x = env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}
```

> [!NOTE] SvelteKit's built-in [`$app/env/*` modules](environment-variables) should be preferred for environment variables.

To make these types available to your app, install [`wrangler`](https://www.npmjs.com/package/wrangler), run [`wrangler types`](https://developers.cloudflare.com/workers/languages/typescript/), and reference them in your `src/app.d.ts`:

```ts
// @filename: ambient.d.ts
import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';

namespace Cloudflare {
export interface Env {
YOUR_KV_NAMESPACE: KVNamespace;
YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
}
}
/// file: src/app.d.ts
// ---cut---

declare global {
namespace App {
interface Platform {
+++ env: Cloudflare.Env;+++
}
}
}

export {};
```
To make these types available to your app, install [`wrangler`](https://www.npmjs.com/package/wrangler) and run [`wrangler types`](https://developers.cloudflare.com/workers/languages/typescript/).

### Testing locally

Cloudflare specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `platform.env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.
Cloudflare specific values are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/workers/wrangler/configuration/#bindings) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/) and are used to populate `env` during development and preview. Use the adapter config [`platformProxy` option](#Options-platformProxy) to change your preferences for the bindings.

> [!NOTE] [Durable Objects](https://developers.cloudflare.com/durable-objects/) and [Workflows](https://developers.cloudflare.com/workflows/), which require custom classes to be exported from your worker, are not currently supported.

Expand Down
38 changes: 37 additions & 1 deletion documentation/docs/60-appendix/35-migrating-to-sveltekit-3.md
Original file line number Diff line number Diff line change
Expand Up @@ -453,9 +453,45 @@ All first-party adapters now require SvelteKit 3, alongside these adapter-specif

### `adapter-cloudflare`

Cloudflare-specific APIs are no longer available on `platform`. Instead, find them where you would expect on a Cloudflare worker:

- `env`, `ctx.waitUntil`, and other `ctx` properties should be imported from `cloudflare:workers`:
```js
// @filename: ambient.d.ts
declare module 'cloudflare:workers' {
export const env: { KV: { get(): Promise<unknown> } };
export function waitUntil(promise: Promise<any>): void;
}
// ---cut---
import { env, waitUntil } from 'cloudflare:workers';

const value = await env.KV.get('key');
```
- `cf` is now a property of the `Request` object:
```js
/// file: src/routes/cf/+server.js
Comment thread
ottomated marked this conversation as resolved.
Comment thread
ottomated marked this conversation as resolved.
// @filename: ambient.d.ts
interface Request {
cf: import('@cloudflare/workers-types').IncomingRequestCfProperties;
}
// @filename: index.js
// @errors: 7031
// ---cut---
export async function GET({ request }) {
const { country } = request.cf;
}
```
- `caches` is now a global variable:
```js
/// file: src/routes/cache/+server.js
let request = new Request('');
// ---cut---
const myCache = await caches.open('foo');
await myCache.match(request);
```

- minimum `wrangler` is now `^4.67.0`
- `@cloudflare/workers-types` upgraded
- `platform.context` removed in favour of `platform.ctx`

### `adapter-node`

Expand Down
17 changes: 0 additions & 17 deletions packages/adapter-cloudflare/ambient.d.ts

This file was deleted.

9 changes: 1 addition & 8 deletions packages/adapter-cloudflare/files/worker.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,9 @@ export default {
/**
* @param {Request} req
* @param {{ ASSETS: { fetch: typeof fetch } }} env
* @param {ExecutionContext} ctx
* @returns {Promise<Response>}
*/
async fetch(req, env, ctx) {
async fetch(req, env) {
if (!origin) {
origin = new URL(req.url).origin;
}
Expand Down Expand Up @@ -96,12 +95,6 @@ export default {

// dynamically-generated pages
return await server.respond(req, {
platform: {
env,
ctx,
caches,
cf: req.cf
},
getClientAddress() {
return /** @type {string} */ (req.headers.get('cf-connecting-ip'));
}
Expand Down
5 changes: 5 additions & 0 deletions packages/adapter-cloudflare/globals.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import type { PlatformProxy } from 'wrangler';

declare global {
var __platform_proxy: PlatformProxy;
}
1 change: 0 additions & 1 deletion packages/adapter-cloudflare/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Adapter } from '@sveltejs/kit';
import './ambient.js';
import { GetPlatformProxyOptions } from 'wrangler';

export default function plugin(options?: AdapterOptions): Adapter;
Expand Down
Loading
Loading