@remix-run/static-middleware 0.2.0 → 0.3.0

package/README.md

@@ -35,6 +35,8 @@ router.get('/', () => new Response('Home'))
 
 ### With Cache Control
 
+Internally, the `staticFiles()` middleware uses the [`createFileResponse()` helper from `@remix-run/response`](https://github.com/remix-run/remix/tree/main/packages/response/README.md#file-responses) to send files with full HTTP semantics. This means it also accepts the same options as the `createFileResponse()` helper.
+
 ```ts
 let router = createRouter({
   middleware: [

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export { staticFiles } from './lib/static.ts';
-export type { StaticFilesOptions } from './lib/static.ts';
+export { type StaticFilesOptions, staticFiles } from './lib/static.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/lib/directory-listing.d.ts

@@ -0,0 +1,2 @@
+export declare function generateDirectoryListing(dirPath: string, pathname: string): Promise<Response>;
+//# sourceMappingURL=directory-listing.d.ts.map

package/dist/lib/directory-listing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directory-listing.d.ts","sourceRoot":"","sources":["../../src/lib/directory-listing.ts"],"names":[],"mappings":"AAaA,wBAAsB,wBAAwB,CAC5C,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,QAAQ,CAAC,CAqPnB"}

package/dist/lib/directory-listing.js

@@ -0,0 +1,278 @@
+import * as path from 'node:path';
+import * as fsp from 'node:fs/promises';
+import { html } from '@remix-run/html-template';
+import { createHtmlResponse } from '@remix-run/response/html';
+import { lookup } from 'mrmime';
+export async function generateDirectoryListing(dirPath, pathname) {
+    let entries = [];
+    try {
+        let dirents = await fsp.readdir(dirPath, { withFileTypes: true });
+        for (let dirent of dirents) {
+            let fullPath = path.join(dirPath, dirent.name);
+            let isDirectory = dirent.isDirectory();
+            let size = 0;
+            let type = '';
+            if (isDirectory) {
+                size = await calculateDirectorySize(fullPath);
+            }
+            else {
+                try {
+                    let stats = await fsp.stat(fullPath);
+                    size = stats.size;
+                    let mimeType = lookup(dirent.name);
+                    type = mimeType || 'application/octet-stream';
+                }
+                catch {
+                    // Unable to stat file, use defaults
+                }
+            }
+            entries.push({
+                name: dirent.name,
+                isDirectory,
+                size,
+                type,
+            });
+        }
+    }
+    catch {
+        return new Response('Error reading directory', { status: 500 });
+    }
+    // Sort: directories first, then alphabetically
+    entries.sort((a, b) => {
+        if (a.isDirectory && !b.isDirectory)
+            return -1;
+        if (!a.isDirectory && b.isDirectory)
+            return 1;
+        return a.name.localeCompare(b.name, undefined, { numeric: true });
+    });
+    // Build table rows
+    let tableRows = [];
+    let folderIcon = html.raw `<svg class="icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3.5h4.5l1.5 1.5h6v8h-12z"/></svg>`;
+    let fileIcon = html.raw `<svg class="icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2h7l3 3v9H3z"/><path d="M10 2v3h3"/></svg>`;
+    // Add parent directory link if not at root
+    if (pathname !== '/' && pathname !== '') {
+        let parentPath = pathname.replace(/\/$/, '').split('/').slice(0, -1).join('/') || '/';
+        tableRows.push(html `
+      <tr class="file-row">
+        <td class="name-cell">
+          <a href="${parentPath}">${folderIcon} ..</a>
+        </td>
+        <td class="size-cell"></td>
+        <td class="type-cell"></td>
+      </tr>
+    `);
+    }
+    for (let entry of entries) {
+        let icon = entry.isDirectory ? folderIcon : fileIcon;
+        let href = pathname.endsWith('/') ? pathname + entry.name : pathname + '/' + entry.name;
+        let sizeDisplay = formatFileSize(entry.size);
+        let typeDisplay = entry.isDirectory ? 'Folder' : entry.type;
+        tableRows.push(html `
+      <tr class="file-row">
+        <td class="name-cell">
+          <a href="${href}">${icon} ${entry.name}</a>
+        </td>
+        <td class="size-cell">${sizeDisplay}</td>
+        <td class="type-cell">${typeDisplay}</td>
+      </tr>
+    `);
+    }
+    return createHtmlResponse(html `
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Index of ${pathname}</title>
+        <style>
+          * {
+            box-sizing: border-box;
+          }
+          body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+              Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            margin: 0;
+            padding: 2rem 1rem;
+            background: #fff;
+            color: #333;
+            font-size: 14px;
+          }
+          .container {
+            max-width: 1200px;
+            margin: 0 auto;
+          }
+          h1 {
+            margin: 0 0 1rem 0;
+            padding: 0;
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: #333;
+          }
+          .icon {
+            width: 14px;
+            height: 14px;
+            display: inline-block;
+            vertical-align: text-top;
+            margin-right: 0.5rem;
+            color: #666;
+          }
+          table {
+            width: 100%;
+            border-collapse: collapse;
+            border: 1px solid #e0e0e0;
+          }
+          thead tr {
+            background: #fafafa;
+          }
+          th {
+            padding: 0.5rem 1rem;
+            text-align: left;
+            font-weight: 600;
+            font-size: 0.8125rem;
+            color: #666;
+            border-bottom: 1px solid #e0e0e0;
+          }
+          td {
+            border-bottom: 1px solid #f0f0f0;
+          }
+          tr:last-child td {
+            border-bottom: none;
+          }
+          .file-row {
+            position: relative;
+          }
+          .file-row:hover {
+            background: #fafafa;
+          }
+          .name-cell {
+            width: 50%;
+            padding: 0;
+          }
+          .name-cell a {
+            display: block;
+            padding: 0.375rem 1rem;
+            color: #0066cc;
+            text-decoration: none;
+          }
+          .name-cell a::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+          }
+          .file-row:hover .name-cell a {
+            text-decoration: underline;
+          }
+          .size-cell {
+            width: 25%;
+            padding: 0.375rem 1rem;
+            text-align: left;
+            color: #666;
+            font-variant-numeric: tabular-nums;
+          }
+          .type-cell {
+            width: 25%;
+            padding: 0.375rem 1rem;
+            color: #666;
+            white-space: nowrap;
+          }
+          @media (max-width: 768px) {
+            body {
+              padding: 1rem 0.5rem;
+            }
+            h1 {
+              font-size: 1.125rem;
+              margin-bottom: 0.75rem;
+            }
+            thead {
+              display: none;
+            }
+            .name-cell a,
+            .size-cell,
+            .type-cell {
+              padding: 0.375rem 0.75rem;
+            }
+            .type-cell {
+              display: none;
+            }
+            .name-cell {
+              width: 60%;
+            }
+            .size-cell {
+              width: 40%;
+              text-align: right;
+            }
+          }
+          @media (max-width: 480px) {
+            body {
+              font-size: 13px;
+            }
+            .name-cell a,
+            .size-cell,
+            .type-cell {
+              padding: 0.375rem 0.5rem;
+            }
+            h1 {
+              font-size: 1rem;
+            }
+            .icon {
+              width: 12px;
+              height: 12px;
+            }
+          }
+        </style>
+      </head>
+      <body>
+        <div class="container">
+          <h1>Index of ${pathname}</h1>
+          <table>
+            <thead>
+              <tr>
+                <th class="name">Name</th>
+                <th class="size">Size</th>
+                <th class="type">Type</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${tableRows}
+            </tbody>
+          </table>
+        </div>
+      </body>
+    </html>
+  `);
+}
+async function calculateDirectorySize(dirPath) {
+    let totalSize = 0;
+    try {
+        let dirents = await fsp.readdir(dirPath, { withFileTypes: true });
+        for (let dirent of dirents) {
+            let fullPath = path.join(dirPath, dirent.name);
+            try {
+                if (dirent.isDirectory()) {
+                    totalSize += await calculateDirectorySize(fullPath);
+                }
+                else if (dirent.isFile()) {
+                    let stats = await fsp.stat(fullPath);
+                    totalSize += stats.size;
+                }
+            }
+            catch {
+                // Skip files/folders we can't access
+            }
+        }
+    }
+    catch {
+        // If we can't read the directory, return 0
+    }
+    return totalSize;
+}
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    let units = ['B', 'kB', 'MB', 'GB', 'TB'];
+    let i = Math.floor(Math.log(bytes) / Math.log(1024));
+    let size = bytes / Math.pow(1024, i);
+    return size.toFixed(i === 0 ? 0 : 1) + ' ' + units[i];
+}

package/dist/lib/static.d.ts

@@ -1,5 +1,5 @@
 import type { Middleware } from '@remix-run/fetch-router';
-import { type FileResponseOptions } from '@remix-run/fetch-router/response-helpers';
+import { type FileResponseOptions } from '@remix-run/response/file';
 export interface StaticFilesOptions extends FileResponseOptions {
     /**
      * Filter function to determine which files should be served.
@@ -16,6 +16,11 @@ export interface StaticFilesOptions extends FileResponseOptions {
      * - `string[]`: Custom list of index files to try in order
      */
     index?: boolean | string[];
+    /**
+     * Whether to return an HTML page listing the files in a directory when the request path
+     * targets a directory. If both this and `index` are set, `index` takes precedence.
+     */
+    listFiles?: boolean;
 }
 /**
  * Creates a middleware that serves static files from the filesystem.

package/dist/lib/static.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"static.d.ts","sourceRoot":"","sources":["../../src/lib/static.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,0CAA0C,CAAA;AAEjD,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAA;IAClC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,CAAA;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,kBAAuB,GAAG,UAAU,CA4DtF"}
+{"version":3,"file":"static.d.ts","sourceRoot":"","sources":["../../src/lib/static.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAkC,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAInG,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAA;IAClC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,kBAAuB,GAAG,UAAU,CAiEtF"}

package/dist/lib/static.js

@@ -1,7 +1,8 @@
 import * as path from 'node:path';
 import * as fsp from 'node:fs/promises';
 import { openFile } from '@remix-run/fs';
-import { file as sendFile, } from '@remix-run/fetch-router/response-helpers';
+import { createFileResponse as sendFile } from '@remix-run/response/file';
+import { generateDirectoryListing } from "./directory-listing.js";
 /**
  * Creates a middleware that serves static files from the filesystem.
  *
@@ -30,7 +31,7 @@ import { file as sendFile, } from '@remix-run/fetch-router/response-helpers';
 export function staticFiles(root, options = {}) {
     // Ensure root is an absolute path
     root = path.resolve(root);
-    let { filter, index: indexOption, ...fileOptions } = options;
+    let { filter, index: indexOption, listFiles, ...fileOptions } = options;
     // Normalize index option
     let index;
     if (indexOption === false) {
@@ -72,6 +73,10 @@ export function staticFiles(root, options = {}) {
                         // Index file doesn't exist, continue to next
                     }
                 }
+                // If no index file found and listFiles is enabled, show directory listing
+                if (!filePath && listFiles) {
+                    return generateDirectoryListing(targetPath, context.url.pathname);
+                }
             }
         }
         catch {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/static-middleware",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Middleware for serving static files from the filesystem",
   "author": "Michael Jackson <mjijackson@gmail.com>",
   "license": "MIT",
@@ -28,16 +28,15 @@
   "devDependencies": {
     "@types/node": "^24.6.0",
     "typescript": "^5.9.3",
-    "@remix-run/fetch-router": "0.10.0",
-    "@remix-run/form-data-middleware": "0.1.0",
-    "@remix-run/lazy-file": "4.0.0",
-    "@remix-run/fs": "0.1.0",
-    "@remix-run/method-override-middleware": "0.1.0"
+    "@remix-run/fetch-router": "0.12.0",
+    "@remix-run/method-override-middleware": "0.1.0",
+    "@remix-run/form-data-middleware": "0.1.0"
   },
   "peerDependencies": {
-    "@remix-run/fetch-router": "^0.10.0",
+    "@remix-run/fetch-router": "^0.12.0",
     "@remix-run/fs": "^0.1.0",
-    "@remix-run/lazy-file": "^4.0.0"
+    "@remix-run/response": "^0.1.0",
+    "@remix-run/html-template": "^0.3.0"
   },
   "keywords": [
     "fetch",
@@ -46,6 +45,9 @@
     "static-files",
     "file-server"
   ],
+  "dependencies": {
+    "mrmime": "^2.0.0"
+  },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "clean": "git clean -fdX",

package/src/index.ts

@@ -1,3 +1 @@
-export { staticFiles } from './lib/static.ts'
-export type { StaticFilesOptions } from './lib/static.ts'
-
+export { type StaticFilesOptions, staticFiles } from './lib/static.ts'

package/src/lib/directory-listing.ts

@@ -0,0 +1,297 @@
+import * as path from 'node:path'
+import * as fsp from 'node:fs/promises'
+import { html } from '@remix-run/html-template'
+import { createHtmlResponse } from '@remix-run/response/html'
+import { lookup } from 'mrmime'
+
+interface DirectoryEntry {
+  name: string
+  isDirectory: boolean
+  size: number
+  type: string
+}
+
+export async function generateDirectoryListing(
+  dirPath: string,
+  pathname: string,
+): Promise<Response> {
+  let entries: DirectoryEntry[] = []
+
+  try {
+    let dirents = await fsp.readdir(dirPath, { withFileTypes: true })
+
+    for (let dirent of dirents) {
+      let fullPath = path.join(dirPath, dirent.name)
+      let isDirectory = dirent.isDirectory()
+      let size = 0
+      let type = ''
+
+      if (isDirectory) {
+        size = await calculateDirectorySize(fullPath)
+      } else {
+        try {
+          let stats = await fsp.stat(fullPath)
+          size = stats.size
+          let mimeType = lookup(dirent.name)
+          type = mimeType || 'application/octet-stream'
+        } catch {
+          // Unable to stat file, use defaults
+        }
+      }
+
+      entries.push({
+        name: dirent.name,
+        isDirectory,
+        size,
+        type,
+      })
+    }
+  } catch {
+    return new Response('Error reading directory', { status: 500 })
+  }
+
+  // Sort: directories first, then alphabetically
+  entries.sort((a, b) => {
+    if (a.isDirectory && !b.isDirectory) return -1
+    if (!a.isDirectory && b.isDirectory) return 1
+    return a.name.localeCompare(b.name, undefined, { numeric: true })
+  })
+
+  // Build table rows
+  let tableRows = []
+
+  let folderIcon = html.raw`<svg class="icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3.5h4.5l1.5 1.5h6v8h-12z"/></svg>`
+  let fileIcon = html.raw`<svg class="icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2h7l3 3v9H3z"/><path d="M10 2v3h3"/></svg>`
+
+  // Add parent directory link if not at root
+  if (pathname !== '/' && pathname !== '') {
+    let parentPath = pathname.replace(/\/$/, '').split('/').slice(0, -1).join('/') || '/'
+    tableRows.push(html`
+      <tr class="file-row">
+        <td class="name-cell">
+          <a href="${parentPath}">${folderIcon} ..</a>
+        </td>
+        <td class="size-cell"></td>
+        <td class="type-cell"></td>
+      </tr>
+    `)
+  }
+
+  for (let entry of entries) {
+    let icon = entry.isDirectory ? folderIcon : fileIcon
+    let href = pathname.endsWith('/') ? pathname + entry.name : pathname + '/' + entry.name
+    let sizeDisplay = formatFileSize(entry.size)
+    let typeDisplay = entry.isDirectory ? 'Folder' : entry.type
+
+    tableRows.push(html`
+      <tr class="file-row">
+        <td class="name-cell">
+          <a href="${href}">${icon} ${entry.name}</a>
+        </td>
+        <td class="size-cell">${sizeDisplay}</td>
+        <td class="type-cell">${typeDisplay}</td>
+      </tr>
+    `)
+  }
+
+  return createHtmlResponse(html`
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Index of ${pathname}</title>
+        <style>
+          * {
+            box-sizing: border-box;
+          }
+          body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+              Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            margin: 0;
+            padding: 2rem 1rem;
+            background: #fff;
+            color: #333;
+            font-size: 14px;
+          }
+          .container {
+            max-width: 1200px;
+            margin: 0 auto;
+          }
+          h1 {
+            margin: 0 0 1rem 0;
+            padding: 0;
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: #333;
+          }
+          .icon {
+            width: 14px;
+            height: 14px;
+            display: inline-block;
+            vertical-align: text-top;
+            margin-right: 0.5rem;
+            color: #666;
+          }
+          table {
+            width: 100%;
+            border-collapse: collapse;
+            border: 1px solid #e0e0e0;
+          }
+          thead tr {
+            background: #fafafa;
+          }
+          th {
+            padding: 0.5rem 1rem;
+            text-align: left;
+            font-weight: 600;
+            font-size: 0.8125rem;
+            color: #666;
+            border-bottom: 1px solid #e0e0e0;
+          }
+          td {
+            border-bottom: 1px solid #f0f0f0;
+          }
+          tr:last-child td {
+            border-bottom: none;
+          }
+          .file-row {
+            position: relative;
+          }
+          .file-row:hover {
+            background: #fafafa;
+          }
+          .name-cell {
+            width: 50%;
+            padding: 0;
+          }
+          .name-cell a {
+            display: block;
+            padding: 0.375rem 1rem;
+            color: #0066cc;
+            text-decoration: none;
+          }
+          .name-cell a::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+          }
+          .file-row:hover .name-cell a {
+            text-decoration: underline;
+          }
+          .size-cell {
+            width: 25%;
+            padding: 0.375rem 1rem;
+            text-align: left;
+            color: #666;
+            font-variant-numeric: tabular-nums;
+          }
+          .type-cell {
+            width: 25%;
+            padding: 0.375rem 1rem;
+            color: #666;
+            white-space: nowrap;
+          }
+          @media (max-width: 768px) {
+            body {
+              padding: 1rem 0.5rem;
+            }
+            h1 {
+              font-size: 1.125rem;
+              margin-bottom: 0.75rem;
+            }
+            thead {
+              display: none;
+            }
+            .name-cell a,
+            .size-cell,
+            .type-cell {
+              padding: 0.375rem 0.75rem;
+            }
+            .type-cell {
+              display: none;
+            }
+            .name-cell {
+              width: 60%;
+            }
+            .size-cell {
+              width: 40%;
+              text-align: right;
+            }
+          }
+          @media (max-width: 480px) {
+            body {
+              font-size: 13px;
+            }
+            .name-cell a,
+            .size-cell,
+            .type-cell {
+              padding: 0.375rem 0.5rem;
+            }
+            h1 {
+              font-size: 1rem;
+            }
+            .icon {
+              width: 12px;
+              height: 12px;
+            }
+          }
+        </style>
+      </head>
+      <body>
+        <div class="container">
+          <h1>Index of ${pathname}</h1>
+          <table>
+            <thead>
+              <tr>
+                <th class="name">Name</th>
+                <th class="size">Size</th>
+                <th class="type">Type</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${tableRows}
+            </tbody>
+          </table>
+        </div>
+      </body>
+    </html>
+  `)
+}
+
+async function calculateDirectorySize(dirPath: string): Promise<number> {
+  let totalSize = 0
+
+  try {
+    let dirents = await fsp.readdir(dirPath, { withFileTypes: true })
+
+    for (let dirent of dirents) {
+      let fullPath = path.join(dirPath, dirent.name)
+
+      try {
+        if (dirent.isDirectory()) {
+          totalSize += await calculateDirectorySize(fullPath)
+        } else if (dirent.isFile()) {
+          let stats = await fsp.stat(fullPath)
+          totalSize += stats.size
+        }
+      } catch {
+        // Skip files/folders we can't access
+      }
+    }
+  } catch {
+    // If we can't read the directory, return 0
+  }
+
+  return totalSize
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  let units = ['B', 'kB', 'MB', 'GB', 'TB']
+  let i = Math.floor(Math.log(bytes) / Math.log(1024))
+  let size = bytes / Math.pow(1024, i)
+  return size.toFixed(i === 0 ? 0 : 1) + ' ' + units[i]
+}

package/src/lib/static.ts

@@ -2,10 +2,9 @@ import * as path from 'node:path'
 import * as fsp from 'node:fs/promises'
 import { openFile } from '@remix-run/fs'
 import type { Middleware } from '@remix-run/fetch-router'
-import {
-  file as sendFile,
-  type FileResponseOptions,
-} from '@remix-run/fetch-router/response-helpers'
+import { createFileResponse as sendFile, type FileResponseOptions } from '@remix-run/response/file'
+
+import { generateDirectoryListing } from './directory-listing.ts'
 
 export interface StaticFilesOptions extends FileResponseOptions {
   /**
@@ -23,6 +22,11 @@ export interface StaticFilesOptions extends FileResponseOptions {
    * - `string[]`: Custom list of index files to try in order
    */
   index?: boolean | string[]
+  /**
+   * Whether to return an HTML page listing the files in a directory when the request path
+   * targets a directory. If both this and `index` are set, `index` takes precedence.
+   */
+  listFiles?: boolean
 }
 
 /**
@@ -54,7 +58,7 @@ export function staticFiles(root: string, options: StaticFilesOptions = {}): Mid
   // Ensure root is an absolute path
   root = path.resolve(root)
 
-  let { filter, index: indexOption, ...fileOptions } = options
+  let { filter, index: indexOption, listFiles, ...fileOptions } = options
 
   // Normalize index option
   let index: string[]
@@ -99,6 +103,11 @@ export function staticFiles(root: string, options: StaticFilesOptions = {}): Mid
             // Index file doesn't exist, continue to next
           }
         }
+
+        // If no index file found and listFiles is enabled, show directory listing
+        if (!filePath && listFiles) {
+          return generateDirectoryListing(targetPath, context.url.pathname)
+        }
       }
     } catch {
       // Path doesn't exist or isn't accessible, fall through