[headers] `SuperHeaders` not compatible with Bun's `Response` constructor

[alexandredev3]

Hello, Remix Team!

I was running a server using Bun with the compression middleware passed to createRouter from @remix-run/fetch-router. The server would start and handle requests normally, but browsers couldn't determine what content the server was returning. No content-type, no content-encoding, essentially no headers were visible.
The same code worked perfectly in Node.js, but in Bun all response headers were missing when compression middleware was applied. After debugging, I traced the issue to SuperHeaders being passed directly to Bun's Response constructor in the @remix-run/response compression module.

Issue

When using SuperHeaders with Bun's Response constructor, the headers are not properly recognized by Bun's runtime, causing the browser to not receive any headers added to SuperHeaders instance.

Environment:
Bun runtime (version: 1.3.3)

Minimal Reproduction

import { SuperHeaders } from '@remix-run/headers'

const server = Bun.serve({
  port: 44100,
  async fetch(request) {
    try {
      // This sample works fine if you replace `SuperHeaders` with `Headers`.
      const headers = new SuperHeaders(request.headers)
      
      headers.append('Content-Type', 'text/plain;charset=utf-8')
      headers.append('X-Test', 'Bun test')
      let response = new Response('Hello, world!', { headers })
      
      console.log(response.headers.get('X-Test')) // null
      console.log(response.headers.get('Content-Type')) // null
      
      return response 
    } catch (error) {
      console.error(error)
      return new Response('Internal Server Error', { status: 500 })
    }
  },
})

Workaround

The only way we got this working was by implementing a helper function to convert SuperHeaders into native Headers:

function toNativeHeaders(superHeaders: SuperHeaders): Headers {
  let headers = new Headers()
  for (let [key, value] of superHeaders) {
    headers.append(key, value)
  }
  return headers
}