Add mime package, update default acceptRanges logic

Author: markdalgleish

demos/sse/app/router.ts

@@ -19,7 +19,6 @@ middleware.push(
     cacheControl: 'no-store, must-revalidate',
     etag: false,
     lastModified: false,
-    acceptRanges: false,
   }),
 )
 

package.json

@@ -17,6 +17,7 @@
   "scripts": {
     "build": "pnpm -r build",
     "clean": "git clean -fdX -e '!/.env' .",
+    "codegen": "pnpm -r run codegen",
     "create-github-release": "node --env-file .env ./scripts/create-github-release.js",
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --fix",

packages/fetch-router/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 This is the changelog for [`fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router). It follows [semantic versioning](https://semver.org/).
 
+## Unreleased
+
+- Add `compress()` response helper for compressing responses based on client's `Accept-Encoding` header
+
+  ```tsx
+  import * as res from '@remix-run/fetch-router/response-helpers'
+
+  router.get('/data', async ({ request }) => {
+    let data = await getHugeDataset()
+    let response = new Response(JSON.stringify(data), {
+      headers: { 'Content-Type': 'application/json' },
+    })
+    return res.compress(response, request)
+  })
+  ```
+
+- Add `compression()` middleware for automatic response compression
+
+  ```tsx
+  import { compression } from '@remix-run/fetch-router/compression-middleware'
+
+  let router = createRouter({
+    middleware: [compression()],
+  })
+  ```
+
+- Modify the default behavior of the `acceptRanges` option for `staticFiles()` middleware and the `file()` response helper to enable ranges only for non-compressible MIME types, as defined by `isCompressibleMimeType()` from `@remix-run/mime`. This is to allow compression for text-based assets while still supporting resumable downloads for media files.
+
+- Add callback support for `acceptRanges` option in `staticFiles()` middleware so it can be customized to enable range requests only for specific MIME types, file sizes, etc.
+
 ## v0.9.0 (2025-11-18)
 
 - Add `session` middleware for automatic management of `context.session` across requests
@@ -65,39 +95,6 @@ This is the changelog for [`fetch-router`](https://github.com/remix-run/remix/tr
   })
   ```
 
-- Add `compress()` response helper for compressing responses based on client's `Accept-Encoding` header
-
-  ```tsx
-  import * as res from '@remix-run/fetch-router/response-helpers'
-
-  router.get('/data', async ({ request }) => {
-    let data = await getHugeDataset()
-    let response = new Response(JSON.stringify(data), {
-      headers: { 'Content-Type': 'application/json' },
-    })
-    return res.compress(response, request)
-  })
-  ```
-
-- Add `compression()` middleware for automatic response compression
-
-  ```tsx
-  import { compression } from '@remix-run/fetch-router/compression-middleware'
-
-  let router = createRouter({
-    middleware: [compression()],
-  })
-  ```
-
-- Add `isCompressibleMediaType()` helper
-
-  ```tsx
-  import { isCompressibleMediaType } from '@remix-run/fetch-router/compression-middleware'
-
-  isCompressibleMediaType('text/html') // true
-  isCompressibleMediaType('image/jpeg') // false
-  ```
-
 ## v0.8.0 (2025-11-03)
 
 - BREAKING CHANGE: Rework how middleware works in the router. This change has far-reaching implications.

packages/fetch-router/README.md

@@ -718,7 +718,8 @@ return res.file(file, request, {
   lastModified: true,
 
   // Whether to support HTTP Range requests for partial content.
-  // Defaults to `true`.
+  // Defaults to enabling ranges only for non-compressible MIME types,
+  // as defined by `isCompressibleMimeType()` from `@remix-run/mime`.
   acceptRanges: true,
 })
 ```
@@ -757,6 +758,21 @@ return res.file(file, request, {
 })
 ```
 
+##### Range Requests and Compression
+
+By default, the `file()` helper enables Range requests only for non-compressible MIME types (like video, audio, and images). This allows text-based assets (HTML, CSS, JavaScript, etc.) to be compressed by the compression middleware while still supporting resumable downloads for media files.
+
+You can override this behavior by explicitly enabling or disabling ranges with the `acceptRanges` option:
+
+```ts
+// Force range request support
+return res.file(file, request, {
+  acceptRanges: true,
+})
+```
+
+**Note:** Range requests and compression are mutually exclusive. When `Accept-Ranges: bytes` is present in the response headers, the compression middleware will not compress the response. This is why the default behavior enables ranges only for non-compressible types.
+
 #### Using `findFile()` with `file()`
 
 When you need to map a route pattern to a directory of files on disk, you can use the `findFile()` function from `@remix-run/lazy-file/fs` to resolve files before sending them with the `file()` response helper:
@@ -812,6 +828,43 @@ staticFiles('./images', {
 })
 ```
 
+Since the `staticFiles()` middleware handles multiple files generically, the `acceptRanges` option can also accept a function that receives the file:
+
+```ts
+import { staticFiles } from '@remix-run/fetch-router/static-middleware'
+import { isCompressibleMimeType } from '@remix-run/mime'
+
+// Enable ranges only for large files
+let router = createRouter({
+  middleware: [
+    staticFiles('./public', {
+      acceptRanges: (file) => file.size > 10 * 1024 * 1024,
+    }),
+  ],
+})
+
+// Or enable ranges only for videos
+let router = createRouter({
+  middleware: [
+    staticFiles('./public', {
+      acceptRanges: (file) => file.type.startsWith('video/'),
+    }),
+  ],
+})
+
+// Or use custom logic combining file size and MIME type
+let router = createRouter({
+  middleware: [
+    staticFiles('./public', {
+      acceptRanges: (file) => {
+        let mediaType = file.type.split(';')[0].trim()
+        return !isCompressibleMimeType(mediaType) || file.size > 10 * 1024 * 1024
+      },
+    }),
+  ],
+})
+```
+
 ### Compressing Responses
 
 The router provides a couple of tools for serving files:
@@ -892,26 +945,24 @@ let router = createRouter({
 })
 ```
 
-The middleware also applies an additional **Content-Type filter** to only apply compression to appropriate media types (MIME types). By default, this uses the `isCompressibleMediaType(mediaType)` helper to check if the media type is compressible. You can customize this behavior with the `filterMediaType` option, re-using the built-in filter if needed.
+The middleware also applies an additional **Content-Type filter** to only apply compression to appropriate media types (MIME types). By default, this uses the `isCompressibleMimeType(mimeType)` helper to check if the MIME type is compressible. You can customize this behavior with the `filterMediaType` option, re-using the built-in filter if needed.
 
 ```ts
-import {
-  compression,
-  isCompressibleMediaType,
-} from '@remix-run/fetch-router/compression-middleware'
+import { compression } from '@remix-run/fetch-router/compression-middleware'
+import { isCompressibleMimeType } from '@remix-run/mime'
 
 let router = createRouter({
   middleware: [
     compression({
       filterMediaType(mediaType) {
-        return isCompressibleMediaType(mediaType) || mediaType === 'application/vnd.example+data'
+        return isCompressibleMimeType(mediaType) || mediaType === 'application/vnd.example+data'
       },
     }),
   ],
 })
 ```
 
-The `isCompressibleMediaType` helper determines whether a media type should be compressed. It returns `true` for:
+The `isCompressibleMimeType` helper determines whether a MIME type should be compressed. It returns `true` for:
 
 - Known compressible types from the [mime-db](https://www.npmjs.com/package/mime-db) database (e.g., `application/json`, `text/html`, `text/css`), except those starting with `x-` (experimental) or `vnd.` (vendor-specific).
 - All `text/*` types (e.g., `text/plain`, `text/markdown`)

packages/fetch-router/package.json

@@ -76,7 +76,6 @@
     "@remix-run/cookie": "workspace:*",
     "@remix-run/session": "workspace:*",
     "@types/node": "^24.6.0",
-    "mime-db": "^1.53.0",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
@@ -85,13 +84,13 @@
     "@remix-run/headers": "workspace:^",
     "@remix-run/html-template": "workspace:^",
     "@remix-run/lazy-file": "workspace:^",
+    "@remix-run/mime": "workspace:^",
     "@remix-run/route-pattern": "workspace:^",
     "@remix-run/session": "workspace:^"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "clean": "git clean -fdX",
-    "generate:compressible": "node --disable-warning=ExperimentalWarning ./scripts/generate-compressible.js",
     "prepublishOnly": "pnpm run build",
     "test": "node --disable-warning=ExperimentalWarning --test './src/**/*.test.ts'",
     "typecheck": "tsc --noEmit"

packages/fetch-router/scripts/generate-compressible.js

@@ -1,5 +1 @@
-export {
-  compression,
-  type CompressionOptions,
-  isCompressibleMediaType,
-} from './lib/middleware/compression.ts'
+export { compression, type CompressionOptions } from './lib/middleware/compression.ts'

packages/fetch-router/src/compression-middleware.ts

@@ -2,45 +2,14 @@ import * as assert from 'node:assert/strict'
 import { gunzip } from 'node:zlib'
 import { promisify } from 'node:util'
 import { describe, it } from 'node:test'
+import { isCompressibleMimeType } from '@remix-run/mime'
 
 import { createRoutes } from '../route-map.ts'
 import { createRouter } from '../router.ts'
-import { compression, isCompressibleMediaType } from './compression.ts'
+import { compression } from './compression.ts'
 
 const gunzipAsync = promisify(gunzip)
 
-describe('isCompressibleMediaType()', () => {
-  it('returns true for common compressible media types', () => {
-    assert.equal(isCompressibleMediaType('text/html'), true)
-    assert.equal(isCompressibleMediaType('text/plain'), true)
-    assert.equal(isCompressibleMediaType('application/json'), true)
-    assert.equal(isCompressibleMediaType('application/javascript'), true)
-    assert.equal(isCompressibleMediaType('text/css'), true)
-  })
-
-  it('returns true for text/* types', () => {
-    assert.equal(isCompressibleMediaType('text/custom'), true)
-    assert.equal(isCompressibleMediaType('text/markdown'), true)
-  })
-
-  it('returns true for types with +json, +text, or +xml suffix', () => {
-    assert.equal(isCompressibleMediaType('application/vnd.api+json'), true)
-    assert.equal(isCompressibleMediaType('application/custom+xml'), true)
-    assert.equal(isCompressibleMediaType('application/something+text'), true)
-  })
-
-  it('returns false for non-compressible media types', () => {
-    assert.equal(isCompressibleMediaType('image/png'), false)
-    assert.equal(isCompressibleMediaType('image/jpeg'), false)
-    assert.equal(isCompressibleMediaType('video/mp4'), false)
-    assert.equal(isCompressibleMediaType('audio/mpeg'), false)
-  })
-
-  it('returns false for empty string', () => {
-    assert.equal(isCompressibleMediaType(''), false)
-  })
-})
-
 describe('compression()', () => {
   it('compresses compressible content types', async () => {
     let routes = createRoutes({
@@ -183,7 +152,7 @@ describe('compression()', () => {
     assert.equal(await htmlResponse.text(), '<html>test</html>')
   })
 
-  it('allows custom filterMediaType to use isCompressibleMediaType', async () => {
+  it('allows custom filterMediaType to use isCompressibleMimeType', async () => {
     let routes = createRoutes({
       json: '/data.json',
       html: '/page.html',
@@ -194,7 +163,7 @@ describe('compression()', () => {
         compression({
           filterMediaType: (mediaType) => {
             // Only compress if it's compressible AND not HTML
-            return isCompressibleMediaType(mediaType) && !mediaType.includes('html')
+            return isCompressibleMimeType(mediaType) && !mediaType.includes('html')
           },
         }),
       ],