Pass external to esbuild in cloudflare adapters

Co-authored-by: Ben McCann <[email protected]>

Author: cimnine

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

@@ -28,14 +28,19 @@ export default {
 			routes: {
 				include: ['/*'],
 				exclude: ['<all>']
-			}
+			},
+			external: [ 'fs' ]
 		})
 	}
 };
 ```
 
 ## Options
 
+The adapter accepts two options: `routes` and `external`.
+
+### `routes`
+
 The `routes` option allows you to customise the [`_routes.json`](https://developers.cloudflare.com/pages/platform/functions/routing/#create-a-_routesjson-file) file generated by `adapter-cloudflare`.
 
 - `include` defines routes that will invoke a function, and defaults to `['/*']`
@@ -47,6 +52,10 @@ The `routes` option allows you to customise the [`_routes.json`](https://develop
 
 You can have up to 100 `include` and `exclude` rules combined. Generally you can omit the `routes` options, but if (for example) your `<prerendered>` paths exceed that limit, you may find it helpful to manually create an `exclude` list that includes `'/articles/*'` instead of the auto-generated `['/articles/foo', '/articles/bar', '/articles/baz', ...]`.
 
+### `external`
+
+`external` is equivalent to the respective [_external_ option of esbuild](https://esbuild.github.io/api/#external). You can use it to mark a file or package as external to exclude it from your build. Typically, this can be used for packages that do import _NodeJS_ modules such as `fs`.
+
 ## Deployment
 
 Please follow the [Get Started Guide](https://developers.cloudflare.com/pages/get-started) for Cloudflare Pages to begin.

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

@@ -61,9 +61,9 @@ Then, you can build your app and deploy it:
 wrangler publish
 ```
 
-## Custom config
+## Adapter configuration
 
-If you would like to use a config file other than `wrangler.toml`, you can do like so:
+The adapter configuration accepts two options: `config` and `external`.
 
 ```js
 // @errors: 2307
@@ -72,11 +72,24 @@ import adapter from '@sveltejs/adapter-cloudflare-workers';
 
 export default {
 	kit: {
-		adapter: adapter({ config: '<your-wrangler-name>.toml' })
+		adapter: adapter({
+			config: '<your-wrangler-name>.toml',
+			external: [ 'fs' ]
+		})
 	}
 };
 ```
 
+### Custom config
+
+If you would like to use a config file other than the default `wrangler.toml`, set `config` to the name of the file. The path is relative to the root of your project.
+
+### `external`
+
+`external` is equivalent to the respective [_external_ option of esbuild](https://esbuild.github.io/api/#external). You can use it to mark a file or package as external to exclude it from your build. Typically, this can be used for packages that do import _NodeJS_ modules such as `fs`.
+
+The values `__STATIC_CONTENT_MANIFEST` and `cloudflare:*` are always in the list of excluded packages and this can't be changed.
+
 ## Bindings
 
 The [`env`](https://developers.cloudflare.com/workers/runtime-apis/fetch-event#parameters) object contains your project's [bindings](https://developers.cloudflare.com/workers/platform/environment-variables/), which consist of KV/DO namespaces, etc. It is passed to SvelteKit via the `platform` property, along with `context` and `caches`, meaning that you can access it in hooks and endpoints:
@@ -120,4 +133,4 @@ When deploying to workers, the server generated by SvelteKit is bundled into a s
 
 ### Accessing the file system
 
-You can't access the file system through methods like `fs.readFileSync` in Serverless/Edge environments. If you need to access files that way, do that during building the app through [prerendering](https://kit.svelte.dev/docs/page-options#prerender). If you have a blog for example and don't want to manage your content through a CMS, then you need to prerender the content (or prerender the endpoint from which you get it) and redeploy your blog everytime you add new content.
+You can't access the file system through methods like `fs.readFileSync` in Serverless/Edge environments. If you need to access files that way, do that during building the app through [prerendering](https://kit.svelte.dev/docs/page-options#prerender). If you have a blog for example and don't want to manage your content through a CMS, then you need to prerender the content (or prerender the endpoint from which you get it) and redeploy your blog everytime you add new content.

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

@@ -1,4 +1,17 @@
 import { Adapter } from '@sveltejs/kit';
 import './ambient.js';
 
-export default function plugin(options: { config?: string }): Adapter;
+export default function plugin(options?: AdapterOptions): Adapter;
+
+export interface AdapterOptions {
+	/**
+	 * List of packages that should not be bundled.
+	 */
+	external?: string[];
+
+	/**
+	 * The name of the wrangler config file to use.
+	 * Defaults to `wrangler.toml`.
+	 */
+	config?: string;
+}

packages/adapter-cloudflare-workers/index.js

@@ -15,12 +15,12 @@ import { fileURLToPath } from 'node:url';
  */
 
 /** @type {import('.').default} */
-export default function ({ config = 'wrangler.toml' } = {}) {
+export default function (options = {}) {
 	return {
 		name: '@sveltejs/adapter-cloudflare-workers',
 
 		async adapt(builder) {
-			const { main, site } = validate_config(builder, config);
+			const { main, site } = validate_config(builder, options.config ?? 'wrangler.toml');
 
 			const files = fileURLToPath(new URL('./files', import.meta.url).href);
 			const tmp = builder.getBuildDirectory('cloudflare-workers-tmp');
@@ -62,11 +62,11 @@ export default function ({ config = 'wrangler.toml' } = {}) {
 				entryPoints: [`${tmp}/entry.js`],
 				outfile: main,
 				bundle: true,
-				external: ['__STATIC_CONTENT_MANIFEST', 'cloudflare:*'],
 				format: 'esm',
 				loader: {
 					'.wasm': 'copy'
-				}
+				},
+				external: ['__STATIC_CONTENT_MANIFEST', 'cloudflare:*', ...(options.external ?? [])]
 			});
 
 			builder.log.minor('Copying assets...');

packages/adapter-cloudflare/index.d.ts

@@ -4,6 +4,11 @@ import './ambient.js';
 export default function plugin(options?: AdapterOptions): Adapter;
 
 export interface AdapterOptions {
+	/**
+	 * List of packages that should not be bundled.
+	 */
+	external?: string[];
+
 	/**
 	 * Customize the automatically-generated `_routes.json` file
 	 * https://developers.cloudflare.com/pages/platform/functions/routing/#create-a-_routesjson-file

packages/adapter-cloudflare/index.js

@@ -58,7 +58,7 @@ export default function (options = {}) {
 				loader: {
 					'.wasm': 'copy'
 				},
-				external: ['cloudflare:*']
+				external: ['cloudflare:*', ...(options.external ?? [])]
 			});
 		}
 	};