feat(adapter-cloudflare): allow override esbuild option

[Toanzzz]

This PR is similar to #10110, but allow you to freely override any esbuild options, by passing specific option(s) or a callback.

Example:

adapter: adapter({
  ...
  esbuildOptions: {
    external: ["fs", "crypto"]
  }
})

Callback style:

adapter: adapter({
  ...
  esbuildOptions: opt => {
    console.log('🔍 esbuildOptions', opt)
    opt.external = ["fs", "crypto"]
    return opt
  }
})

Similarly, this will help the following issues:

• Modules not resolved with adapter-cloudflare (buffer, stream, util, crypto) #3564
• Support Node Compat in Cloudflare Adaptor #10028

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4c42bb8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sveltejs/adapter-cloudflare	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[benmccann]

This has come up several times in the past. Rather than exposing the esuild options we've tried to address whatever usecase directly. It's hard to know how to do that in this case as I'm not sure what issue you're trying to solve

[Toanzzz]

Hi @benmccann, thanks for you insight. I was a bit rush when creating this PR so didn't have time to properly explain the issue, sorry.

The issue

My use case is simple: I want to use some 3rd party packges, that require NodeJS runtime.

In the official doc, you can use the combination of nodejs_compat flag and importing directly from node: prefix.

import { Buffer } from 'node:buffer';

But when working with some external library, they sometime still assume that those object exist in global scope, and using it directly with out import them from node: prefix. This lead to the following error at runtime: (I'm using siwe package)

ReferenceError: Buffer is not defined
    at new api (_worker.js:29153:7)
    at GrammarApi.generateApi (_worker.js:29928:21)
    at node_modules/@spruceid/siwe-parser/dist/abnf.js (_worker.js:29940:32)
    at __require22 (_worker.js:69:50)
    at node_modules/@spruceid/siwe-parser/dist/parsers.js (_worker.js:30089:18)
    at __require22 (_worker.js:69:50)
    at node_modules/siwe/dist/client.js (_worker.js:51343:25)
    at __require22 (_worker.js:69:50)
    at node_modules/siwe/dist/siwe.js (_worker.js:51620:18)
    at __require22 (_worker.js:69:50) {
  stack: ReferenceError: Buffer is not defined
    at new a…s:51620:18)
    at __require22 (_worker.js:69:50),
  message: Buffer is not defined
}

I tried to polyfill the Buffer object, but it doesn't work, due to hoisting when bundling

// buffer-shim.ts
import { Buffer as _NodeBuffer } from "node:buffer";

globalThis.Buffer = _NodeBuffer;

// Does NOT work. The global assignment will come AFTER the import.
import './buffer-shim'
import { SiweMessage } from "siwe";
// ...

Proposed solution

With this PR, we can easily polyfill those kind of packages, by using external and inject options:

// src/lib/buffer-shim.ts
import { Buffer as _NodeBuffer } from "node:buffer";

globalThis.Buffer = _NodeBuffer;

+export { _NodeBuffer as Buffer }

// svelte.config.js
kit: {
  adapter: adapter({
    // other config ...
+    esbuildOptions: {
+      external: ["node:buffer"],
+      inject: ["./src/lib/buffer-shim.ts"],
+    },
  }),

Example

Check out this example repo:

git checkout https://github.com/Toanzzz/cloudflare-adapter-issue

Install deps, build the worker, and invoke wrangler on the final _worker.js file:

npm install
npm run build
npm run wrangler:prod

Repeat the same steps above on the fix branch for the working solution.

[benmccann]

Thanks for the explanation @Toanzzz. While I'm sympathetic to your predicament, I'd have to discuss your PR with the other maintainers some of whom are away right now, and I'm not optimistic this PR would be accepted based on past discussions around this issue.

I took a look at your issue and it seems to be caused by ldthomas/apg-js#16. I think the easiest path forward for you is probably to fix that issue, which is probably the better fix anyway rather than trying to work around it with a bundler

[benmccann]

I'm going to close this in favor of #10424, which seems closer to being ready to merge