Skip to content

Commit 908a948

Browse files
duducppteemingc
duducpp
and
teemingc
authored
feat: implements .jsonc support to adapter-cloudflare-workers (#13467)
* feat: implements jsonc-parse * feat: updates adapter-cloudflare-workers documentation * feat: using vite approach to get wrangler config removes jsonc-parser dependency * update the docs * remove toml dep * add adapter option description for config * allow wrangler to find the config file * add changeset * json and jsonc requires wrangler 3.91.0 * standardise troubleshooting sections * fix lock file * update links * fix pnpm lock --------- Co-authored-by: Chew Tee Ming <[email protected]>
1 parent 84c0293 commit 908a948

File tree

8 files changed

+129
-142
lines changed

8 files changed

+129
-142
lines changed

‎.changeset/strong-ravens-film.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/adapter-cloudflare-workers': minor
3+
---
4+
5+
feat: support `.jsonc` Wrangler configuration files

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

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Cloudflare Pages
33
---
44

5-
To deploy to [Cloudflare Pages](https://developers.cloudflare.com/pages/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).
5+
To deploy to [Cloudflare Pages](https://pages.cloudflare.com/), use [`adapter-cloudflare`](https://github.com/sveltejs/kit/tree/main/packages/adapter-cloudflare).
66

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

@@ -30,10 +30,9 @@ export default {
3030
exclude: ['<all>']
3131
},
3232
platformProxy: {
33-
configPath: 'wrangler.toml',
33+
configPath: undefined,
3434
environment: undefined,
35-
experimentalJsonConfig: false,
36-
persist: false
35+
persist: undefined
3736
}
3837
})
3938
}
@@ -44,7 +43,7 @@ export default {
4443

4544
### routes
4645

47-
Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/platform/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`.
46+
Allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`.
4847

4948
- `include` defines routes that will invoke a function, and defaults to `['/*']`
5049
- `exclude` defines routes that will _not_ invoke a function — this is a faster and cheaper way to serve your app's static assets. This array can include the following special values:
@@ -57,11 +56,11 @@ You can have up to 100 `include` and `exclude` rules combined. Generally you can
5756

5857
### platformProxy
5958

60-
Preferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#syntax) Wrangler API documentation for a full list of options.
59+
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.
6160

6261
## Deployment
6362

64-
Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started) for Cloudflare Pages to begin.
63+
Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started/) for Cloudflare Pages to begin.
6564

6665
When configuring your project settings, you must use the following settings:
6766

@@ -71,7 +70,7 @@ When configuring your project settings, you must use the following settings:
7170

7271
## Runtime APIs
7372

74-
The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/pages/platform/functions/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/handlers/fetch/#contextwaituntil), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#the-cf-property-requestinitcfproperties), meaning that you can access it in hooks and endpoints:
73+
The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/pages/functions/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:
7574

7675
```js
7776
// @errors: 7031
@@ -80,9 +79,9 @@ export async function POST({ request, platform }) {
8079
}
8180
```
8281

83-
> [!NOTE] SvelteKit's built-in `$env` module should be preferred for environment variables.
82+
> [!NOTE] SvelteKit's built-in [`$env` module]($env-static-private) should be preferred for environment variables.
8483
85-
To make these types available to your app, install `@cloudflare/workers-types` and reference them in your `src/app.d.ts`:
84+
To make these types available to your app, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and reference them in your `src/app.d.ts`:
8685

8786
```ts
8887
/// file: src/app.d.ts
@@ -104,23 +103,38 @@ export {};
104103

105104
### Testing Locally
106105

107-
Cloudflare Workers 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 the configuration in your `wrangler.toml` file 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.
106+
Cloudflare Workers specific values in the `platform` property are emulated during dev and preview modes. Local [bindings](https://developers.cloudflare.com/pages/functions/bindings/) are created based on your [Wrangler configuration file](https://developers.cloudflare.com/pages/functions/wrangler-configuration/#local-development) 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.
108107

109-
For testing the build, you should use [wrangler](https://developers.cloudflare.com/workers/cli-wrangler) **version 3**. Once you have built your site, run `wrangler pages dev .svelte-kit/cloudflare`.
108+
For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 3**. Once you have built your site, run `wrangler pages dev .svelte-kit/cloudflare`.
110109

111110
## Notes
112111

113-
Functions contained in the `/functions` directory at the project's root will _not_ be included in the deployment, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/platform/functions/#advanced-mode). Functions should be implemented as [server endpoints](routing#server) in your SvelteKit app.
112+
Functions contained in the [`/functions` directory](https://developers.cloudflare.com/pages/functions/routing/) at the project's root will _not_ be included in the deployment. Instead, functions should be implemented as [server endpoints](routing#server) in your SvelteKit app, which is compiled to a [single `_worker.js` file](https://developers.cloudflare.com/pages/functions/advanced-mode/).
114113

115-
The `_headers` and `_redirects` files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the `/static` folder.
114+
The [`_headers`](https://developers.cloudflare.com/pages/configuration/headers/) and [`_redirects`](https://developers.cloudflare.com/pages/configuration/redirects/) files specific to Cloudflare Pages can be used for static asset responses (like images) by putting them into the `/static` folder.
116115

117116
However, they will have no effect on responses dynamically rendered by SvelteKit, which should return custom headers or redirect responses from [server endpoints](routing#server) or with the [`handle`](hooks#Server-hooks-handle) hook.
118117

119118
## Troubleshooting
120119

121120
### Further reading
122121

123-
You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site).
122+
You may wish to refer to [Cloudflare's documentation for deploying a SvelteKit site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-kit-site/).
123+
124+
### Node.js compatibility
125+
126+
If you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/), you can add the `nodejs_compat` compatibility flag to your Wrangler configuration file:
127+
128+
```jsonc
129+
/// file: wrangler.jsonc
130+
{
131+
"compatibility_flags": ["nodejs_compat"]
132+
}
133+
```
134+
135+
### Worker size limits
136+
137+
When deploying your application, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.
124138

125139
### Accessing the file system
126140

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

Lines changed: 43 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Cloudflare Workers
44

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

7-
> [!NOTE] Unless you have a specific reason to use `adapter-cloudflare-workers`, it's recommended that you use `adapter-cloudflare` instead. Both adapters have equivalent functionality, but Cloudflare Pages offers features like GitHub integration with automatic builds and deploys, preview deployments, instant rollback and so on.
7+
> [!NOTE] Unless you have a specific reason to use `adapter-cloudflare-workers`, it's recommended that you use [`adapter-cloudflare`](adapter-cloudflare) instead. Both adapters have equivalent functionality, but Cloudflare Pages offers features like GitHub integration with automatic builds and deploys, preview deployments, instant rollback and so on.
88
99
## Usage
1010

@@ -18,13 +18,7 @@ import adapter from '@sveltejs/adapter-cloudflare-workers';
1818
export default {
1919
kit: {
2020
adapter: adapter({
21-
config: 'wrangler.toml',
22-
platformProxy: {
23-
configPath: 'wrangler.toml',
24-
environment: undefined,
25-
experimentalJsonConfig: false,
26-
persist: false
27-
}
21+
// see below for options that can be set here
2822
})
2923
}
3024
};
@@ -34,42 +28,44 @@ export default {
3428

3529
### config
3630

37-
Path to your custom `wrangler.toml` or `wrangler.json` config file.
31+
Path to your [Wrangler configuration file](https://developers.cloudflare.com/workers/wrangler/configuration/). If you would like to use a Wrangler configuration filename other than `wrangler.jsonc`, you can specify it using this option.
3832

3933
### platformProxy
4034

41-
Preferences for the emulated `platform.env` local bindings. See the [getPlatformProxy](https://developers.cloudflare.com/workers/wrangler/api/#syntax) Wrangler API documentation for a full list of options.
35+
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.
4236

4337
## Basic Configuration
4438

45-
This adapter expects to find a [wrangler.toml/wrangler.json](https://developers.cloudflare.com/workers/platform/sites/configuration) file in the project root. It should look something like this:
46-
47-
```toml
48-
/// file: wrangler.toml
49-
name = "<your-service-name>"
50-
account_id = "<your-account-id>"
51-
52-
main = "./.cloudflare/worker.js"
53-
site.bucket = "./.cloudflare/public"
54-
55-
build.command = "npm run build"
56-
57-
compatibility_date = "2021-11-12"
58-
workers_dev = true
39+
This adapter expects to find a [Wrangler configuration file](https://developers.cloudflare.com/workers/configuration/sites/configuration/) in the project root. It should look something like this:
40+
41+
```jsonc
42+
/// file: wrangler.jsonc
43+
{
44+
"name": "<your-service-name>",
45+
"account_id": "<your-account-id>",
46+
"main": "./.cloudflare/worker.js",
47+
"site": {
48+
"bucket": "./.cloudflare/public"
49+
},
50+
"build": {
51+
"command": "npm run build"
52+
},
53+
"compatibility_date": "2021-11-12"
54+
}
5955
```
6056

61-
`<your-service-name>` can be anything. `<your-account-id>` can be found by logging into your [Cloudflare dashboard](https://dash.cloudflare.com) and grabbing it from the end of the URL:
57+
`<your-service-name>` can be anything. `<your-account-id>` can be found by running `wrangler whoami` using the Wrangler CLI tool or by logging into your [Cloudflare dashboard](https://dash.cloudflare.com) and grabbing it from the end of the URL:
6258

6359
```
64-
https://dash.cloudflare.com/<your-account-id>
60+
https://dash.cloudflare.com/<your-account-id>/home
6561
```
6662

67-
> [!NOTE] You should add the `.cloudflare` directory (or whichever directories you specified for `main` and `site.bucket`) to your `.gitignore`.
63+
> [!NOTE] You should add the `.cloudflare` directory (or whichever directories you specified for `main` and `site.bucket`) and the `.wrangler` directory to your `.gitignore`.
6864
69-
You will need to install [wrangler](https://developers.cloudflare.com/workers/wrangler/get-started/) and log in, if you haven't already:
65+
You will need to install [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/) and log in, if you haven't already:
7066

71-
```
72-
npm i -g wrangler
67+
```sh
68+
npm i -D wrangler
7369
wrangler login
7470
```
7571

@@ -79,20 +75,9 @@ Then, you can build your app and deploy it:
7975
wrangler deploy
8076
```
8177

82-
## Custom config
83-
84-
If you would like to use a config file other than `wrangler.toml` you can specify so using the [`config` option](#Options-config).
85-
86-
If you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/#enable-nodejs-from-the-cloudflare-dashboard), you can add "nodejs_compat" flag to `wrangler.toml`:
87-
88-
```toml
89-
/// file: wrangler.toml
90-
compatibility_flags = [ "nodejs_compat" ]
91-
```
92-
9378
## Runtime APIs
9479

95-
The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/pages/platform/functions/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/handlers/fetch/#contextwaituntil), [`caches`](https://developers.cloudflare.com/workers/runtime-apis/cache/), and [`cf`](https://developers.cloudflare.com/workers/runtime-apis/request/#the-cf-property-requestinitcfproperties), meaning that you can access it in hooks and endpoints:
80+
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:
9681

9782
```js
9883
// @errors: 7031
@@ -101,9 +86,9 @@ export async function POST({ request, platform }) {
10186
}
10287
```
10388

104-
> [!NOTE] SvelteKit's built-in `$env` module should be preferred for environment variables.
89+
> [!NOTE] SvelteKit's built-in [`$env` module]($env-static-private) should be preferred for environment variables.
10590
106-
To make these types available to your app, install `@cloudflare/workers-types` and reference them in your `src/app.d.ts`:
91+
To make these types available to your app, install [`@cloudflare/workers-types`](https://www.npmjs.com/package/@cloudflare/workers-types) and reference them in your `src/app.d.ts`:
10792

10893
```ts
10994
/// file: src/app.d.ts
@@ -125,15 +110,26 @@ export {};
125110

126111
### Testing Locally
127112

128-
Cloudflare Workers 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 the configuration in your `wrangler.toml` file 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.
113+
Cloudflare Workers 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.
129114

130-
For testing the build, you should use [wrangler](https://developers.cloudflare.com/workers/cli-wrangler) **version 3**. Once you have built your site, run `wrangler dev`.
115+
For testing the build, you should use [Wrangler](https://developers.cloudflare.com/workers/wrangler/) **version 3**. Once you have built your site, run `wrangler dev`.
131116

132117
## Troubleshooting
133118

119+
### Node.js compatibility
120+
121+
If you would like to enable [Node.js compatibility](https://developers.cloudflare.com/workers/runtime-apis/nodejs/), you can add the `nodejs_compat` compatibility flag to your Wrangler configuration file:
122+
123+
```jsonc
124+
/// file: wrangler.jsonc
125+
{
126+
"compatibility_flags": ["nodejs_compat"]
127+
}
128+
```
129+
134130
### Worker size limits
135131

136-
When deploying to workers, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.
132+
When deploying your application, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.
137133

138134
### Accessing the file system
139135

‎package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,11 @@
3434
"packageManager": "[email protected]",
3535
"engines": {
3636
"pnpm": ">=9.0.0"
37+
},
38+
"pnpm": {
39+
"onlyBuiltDependencies": [
40+
"svelte-preprocess",
41+
"workerd"
42+
]
3743
}
3844
}

‎packages/adapter-cloudflare-workers/index.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { GetPlatformProxyOptions } from 'wrangler';
55
export default function plugin(options?: AdapterOptions): Adapter;
66

77
export interface AdapterOptions {
8+
/**
9+
* Path to your {@link https://developers.cloudflare.com/workers/wrangler/configuration/ | Wrangler configuration file}.
10+
*/
811
config?: string;
912
/**
1013
* Config object passed to {@link https://developers.cloudflare.com/workers/wrangler/api/#getplatformproxy | getPlatformProxy}

0 commit comments

Comments
 (0)