range 206 fix for safari

Author: kensnyder

packages/bunshine/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v3.1.2 - Nov 25, 2024
+
+- Change default range chunk size 3MB => 1MB
+- Support passing headers to c.file()
+- Return 206 in ranged downloads even if whole file is requested (Safari bug)
+
 ## v3.1.1 - Nov 23, 2024
 
 - Fix Content-Range header when file size is 0

packages/bunshine/README.md

@@ -2,14 +2,14 @@
 
 A Bun HTTP & WebSocket server that is a little ray of sunshine.
 
-<img alt="Bunshine Logo" src="https://github.com/kensnyder/bunshine/raw/main/packages/bunshine/assets/bunshine-logo.png?v=3.1.1" width="200" height="187" />
+<img alt="Bunshine Logo" src="https://github.com/kensnyder/bunshine/raw/main/packages/bunshine/assets/bunshine-logo.png?v=3.1.2" width="200" height="187" />
 
-[![NPM Link](https://img.shields.io/npm/v/bunshine?v=3.1.1)](https://npmjs.com/package/bunshine)
-[![Language: TypeScript](https://badgen.net/static/language/TS?v=3.1.1)](https://github.com/search?q=repo:kensnyder/bunshine++language:TypeScript&type=code)
-[![Code Coverage](https://codecov.io/gh/kensnyder/bunshine/graph/badge.svg?token=4LLWB8NBNT&v=3.1.1)](https://codecov.io/gh/kensnyder/bunshine)
-[![Dependencies: 1](https://badgen.net/static/dependencies/1/green?v=3.1.1)](https://www.npmjs.com/package/bunshine?activeTab=dependencies)
-![Tree shakeable](https://badgen.net/static/tree%20shakeable/yes/green?v=3.1.1)
-[![ISC License](https://badgen.net/github/license/kensnyder/bunshine?v=3.1.1)](https://opensource.org/licenses/ISC)
+[![NPM Link](https://img.shields.io/npm/v/bunshine?v=3.1.2)](https://npmjs.com/package/bunshine)
+[![Language: TypeScript](https://badgen.net/static/language/TS?v=3.1.2)](https://github.com/search?q=repo:kensnyder/bunshine++language:TypeScript&type=code)
+[![Code Coverage](https://codecov.io/gh/kensnyder/bunshine/graph/badge.svg?token=4LLWB8NBNT&v=3.1.2)](https://codecov.io/gh/kensnyder/bunshine)
+[![Dependencies: 1](https://badgen.net/static/dependencies/1/green?v=3.1.2)](https://www.npmjs.com/package/bunshine?activeTab=dependencies)
+![Tree shakeable](https://badgen.net/static/tree%20shakeable/yes/green?v=3.1.2)
+[![ISC License](https://badgen.net/github/license/kensnyder/bunshine?v=3.1.2)](https://opensource.org/licenses/ISC)
 
 ## Installation
 
@@ -61,7 +61,8 @@ _Or to run Bunshine on Node,
 12. [Examples of common http server setup](#examples-of-common-http-server-setup)
 13. [Design Decisions](#design-decisions)
 14. [Roadmap](#roadmap)
-15. [ISC License](./LICENSE.md)
+15. [Change Log](./CHANGELOG.md)
+16. [ISC License](./LICENSE.md)
 
 ## Upgrading from 1.x to 2.x
 
@@ -238,6 +239,56 @@ See the [serveFiles](#serveFiles) section for more info.
 Also note you can serve files with Bunshine anywhere with `bunx bunshine-serve`.
 It currently uses the default `serveFiles()` options.
 
+If you want to manually manage serving a file, you can use the following approach.
+
+```ts
+import { HttpRouter, serveFiles } from 'bunshine';
+
+const app = new HttpRouter();
+
+app.get('/assets/:name.png', c => {
+  const name = c.params.name;
+  const filePath = `${import.meta.dir}/assets/${name}.png`;
+  // you can pass a string path
+  return c.file(filePath);
+  // Bun will set Content-Type based on the string file extension
+});
+
+app.get('/build/:hash.map', c => {
+  const hash = c.params.hash;
+  const filePath = `${import.meta.dir}/assets/${name}.png`;
+  // you can pass a BunFile
+  return c.file(
+    Bun.file(filePath, {
+      // Bun will automatically set Content-Type based on the file's extension
+      // but you can set it or override it, for instance if Bun doesn't know it's type
+      headers: { 'Content-type': 'application/json' },
+    })
+  );
+});
+
+app.get('/profile/*.jpg', async c => {
+  // you can pass a Buffer, Readable, or TypedArray
+  const intArray = getBytesFromExternal(c.params[0]);
+  const resp = c.file(bytes);
+  // You can use something like file-type on npm
+  // To get a mime type based on binary data
+  const { mime } = await fileTypeFromBuffer(intArray);
+  resp.headers.set('Content-type', mime);
+  return resp;
+});
+
+app.get('/files/*', async c => {
+  // c.file() accepts 4 options:
+  return c.file(path, {
+    disposition, // Use a Content-Disposition header with "inline" or "attachment"
+    headers, // additional headers to add
+    acceptRanges, // unless false, will support partial (ranged) downloads
+    chunkSize, // Size for ranged downloads when client doesn't specify chunk size. Defaults to 3MB
+  });
+});
+```
+
 ## Writing middleware
 
 Here are more examples of attaching middleware.
@@ -601,11 +652,11 @@ app.socket.at<ParmasShape, DataShape>('/games/rooms/:room', {
     sc.readyState; // 0=connecting, 1=connected, 2=closing, 3=close
     sc.binaryType; // nodebuffer, arraybuffer, uint8array
     sc.send(message, compress /*optional*/); // compress is optional
-    //      message can be string, data to be JSON.stringified, or binary data such as Buffer or Uint8Array.
-    //               compress can be true to compress message
+    //   message can be string, data to be JSON.stringified, or binary data such as Buffer or Uint8Array.
+    //   compress can be true to compress message
     sc.close(status /*optional*/, reason /*optional*/); // status and reason are optional
-    //       status can be a valid WebSocket status number (in the 1000s)
-    //               reason can be text to tell client why you are closing
+    //   status can be a valid WebSocket status number (in the 1000s)
+    //   reason can be text to tell client why you are closing
     sc.terminate(); // terminates socket without telling client why
     sc.subscribe(topic); // The name of a topic to subscribe this client
     sc.unsubscribe(topic); // Name of topic to unsubscribe
@@ -620,8 +671,9 @@ app.socket.at<ParmasShape, DataShape>('/games/rooms/:room', {
     `${message}`; // will do the same as .text()
     message.buffer(); // get data as Buffer
     message.arrayBuffer(); // get data as array buffer
-    message.readableString(); // get data as a ReadableString object
+    message.readableStream(); // get data as a ReadableStream object
     message.json(); // parse data with JSON.parse()
+    message.type; // message, ping, or pong
   },
   // called when a handler throws any error
   error: (sc: SocketContext, error: Error) => {
@@ -1129,7 +1181,7 @@ example:
 
 Screenshot:
 
-<img alt="devLogger" src="https://github.com/kensnyder/bunshine/raw/main/assets/devLogger-screenshot.png?v=3.1.1" width="524" height="78" />
+<img alt="devLogger" src="https://github.com/kensnyder/bunshine/raw/main/assets/devLogger-screenshot.png?v=3.1.2" width="524" height="78" />
 
 `prodLogger` outputs logs in JSON with the following shape:
 
@@ -1145,7 +1197,7 @@ Request log:
   "method": "GET",
   "pathname": "/home",
   "runtime": "Bun v1.1.34",
-  "poweredBy": "Bunshine v3.1.1",
+  "poweredBy": "Bunshine v3.1.2",
   "machine": "server1",
   "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36",
   "pid": 123
@@ -1164,7 +1216,7 @@ Response log:
   "method": "GET",
   "pathname": "/home",
   "runtime": "Bun v1.1.34",
-  "poweredBy": "Bunshine v3.1.1",
+  "poweredBy": "Bunshine v3.1.2",
   "machine": "server1",
   "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36",
   "pid": 123,
@@ -1354,7 +1406,25 @@ app.get('/', c => {
   c.url.searchParams; // URLSearchParams object
   Object.fromEntries(c.url.searchParams); // as plain object (but repeated keys are dropped)
   for (const [key, value] of c.url.searchParams) {
-  } // iterate params
+    // iterate params
+  }
+});
+
+// Or set c.query via middleware
+app.use(c => {
+  c.query = Object.fromEntries(c.url.searchParams);
+});
+
+// how to read json payload
+app.post('/api/user', async c => {
+  const data = await c.request.json();
+});
+
+// Or set c.body via middleware
+app.on(['POST', 'PUT', 'PATCH'], async c => {
+  if (c.request.headers.get('Content-Type')?.includes('application/json')) {
+    c.body = await c.request.json();
+  }
 });
 
 // create small functions that always return the same thing
@@ -1363,12 +1433,6 @@ const respondWith404 = c => c.text('Not found', { status: 404 });
 app.get(/^\./, respondWith404);
 // block URLs that end with .env and other dumb endings
 app.all(/\.(env|bak|old|tmp|backup|log|ini|conf)$/, respondWith404);
-// block WordPress URLs such as /wordpress/wp-includes/wlwmanifest.xml
-app.all(/(^wordpress\/|\/wp-includes\/)/, respondWith404);
-// block Other language URLs such as /phpinfo.php and /admin.cgi
-app.all(/^[^/]+\.(php|cgi)$/, respondWith404);
-// block Commonly probed application paths
-app.all(/^(phpmyadmin|mysql|cgi-bin|cpanel|plesk)/i, respondWith404);
 
 // middleware to add CSP
 app.use(async (c, next) => {
@@ -1398,7 +1462,7 @@ app.headGet('/embeds/*', async (c, next) => {
 });
 
 // Persist data in c.locals
-app.get('/api/*', async (c, next) => {
+app.all('/api/*', async (c, next) => {
   const authValue = c.request.headers.get('Authorization');
   // subsequent handler will have access to this auth information
   c.locals.auth = {
@@ -1413,7 +1477,7 @@ function castSchema(zodSchema: ZodObject): Middleware {
   return async c => {
     const result = zodSchema.safeParse(await c.json());
     if (result.error) {
-      return c.json(result.error, { status: 400 });
+      return c.text(result.error, { status: 400 });
     }
     c.locals.safePayload = result.data;
   };
@@ -1424,8 +1488,11 @@ app.post('/api/users', castSchema(userCreateSchema), createUser);
 // Destructure context object
 app.get('/api/*', async ({ url, request, json }) => {
   // do stuff with url and request
-  return json({ message: 'my json response' });
+  return json({ message: `my json response at ${url.pathname}` });
 });
+
+// listen on random port
+app.listen({ port: 0, reusePort: true });
 ```
 
 ## Design Decisions

packages/bunshine/bin/serve.ts

@@ -18,7 +18,7 @@ app.headGet(
     index: ['index.html'],
   })
 );
-app.listen();
+app.listen({ port: 0, reusePort: true });
 
 console.log(`☀️ Bunshine serving static files at ${app.server!.url}`);
 

packages/bunshine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bunshine",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "module": "server/server.ts",
   "type": "module",
   "main": "index.ts",

packages/bunshine/src/HttpRouter/HttpRouter.ts

@@ -194,17 +194,17 @@ export default class HttpRouter {
   ) {
     return this.on<ParamsShape>(['HEAD', 'GET'], path, handlers);
   }
-  use(...handlers: Handler<{}>[]) {
+  use = (...handlers: Handler<{}>[]) => {
     return this.all('*', handlers);
-  }
-  on404(...handlers: SingleHandler<Record<string, string>>[]) {
+  };
+  on404 = (...handlers: SingleHandler<Record<string, string>>[]) => {
     this._on404Handlers.push(...handlers.flat(9));
     return this;
-  }
-  on500(...handlers: SingleHandler<Record<string, string>>[]) {
+  };
+  on500 = (...handlers: SingleHandler<Record<string, string>>[]) => {
     this._on500Handlers.push(...handlers.flat(9));
     return this;
-  }
+  };
   fetch = async (request: Request, server: Server) => {
     const context = new Context(request, server, this);
     const pathname = context.url.pathname;

packages/bunshine/src/parseRangeHeader/parseRangeHeader.spec.ts

@@ -57,15 +57,15 @@ describe('parseRangeHeader', () => {
       status: 416,
     });
   });
-  it('should return 200 on full byte range', () => {
+  it('should return 206 on full byte range', () => {
     const result = parseRangeHeader({
       rangeHeader: 'bytes=0-999',
       totalFileSize: 1000,
     });
     expect(result).toEqual({
-      slice: null,
+      slice: { start: 0, end: 999 },
       contentLength: 1000,
-      status: 200,
+      status: 206,
     });
   });
   it('should return 206 on first bytes', () => {

packages/bunshine/src/parseRangeHeader/parseRangeHeader.ts

@@ -7,7 +7,7 @@ export type RangeInformation = {
 export default function parseRangeHeader({
   rangeHeader,
   totalFileSize,
-  defaultChunkSize = 3 * 1024 ** 2, // 3MB chunk if byte range is open ended
+  defaultChunkSize = 1024 ** 2, // 1MB chunk if byte range is open ended
 }: RangeInformation) {
   if (!rangeHeader) {
     // range header missing or empty
@@ -42,7 +42,8 @@ export default function parseRangeHeader({
     return { slice: null, contentLength: null, status: 416 };
   }
   if (start === 0 && end === totalFileSize - 1) {
-    return { slice: null, contentLength: totalFileSize, status: 200 };
+    // safari expects a 206 even if the range is the full file
+    // return { slice: null, contentLength: totalFileSize, status: 200 };
   }
   return { slice: { start, end }, contentLength: end - start + 1, status: 206 };
 }

packages/bunshine/src/responseFactories/file/file.spec.ts

@@ -92,11 +92,14 @@ describe('c.file()', () => {
     });
     const range1Bytes = await rangeResponse1.blob();
 
-    expect(rangeResponse1.status).toBe(200);
+    expect(rangeResponse1.status).toBe(206);
     expect(rangeResponse1.headers.get('accept-ranges')).toBe('bytes');
     expect(rangeResponse1.headers.get('content-type')).toBe('image/jpeg');
     expect(range1Bytes.size).toBe(fileSize);
     expect(rangeResponse1.headers.get('content-length')).toBe(String(fileSize));
+    expect(rangeResponse1.headers.get('content-range')).toBe(
+      `bytes 0-${fileSize - 1}/${fileSize}`
+    );
     expect(range1Bytes).toEqual(fullFileBytes);
 
     // Step 4: Fetch range "bytes=0-999" and validate

packages/bunshine/src/responseFactories/file/file.ts

@@ -8,6 +8,7 @@ export type FileResponseOptions = {
   chunkSize?: number;
   disposition?: 'inline' | 'attachment';
   acceptRanges?: boolean;
+  headers?: HeadersInit;
 };
 
 export default async function file(
@@ -31,15 +32,23 @@ export default async function file(
   });
   // add last modified
   resp.headers.set('Last-Modified', new Date(file.lastModified).toUTCString());
-  if (fileOptions.disposition === 'attachment') {
-    const filename = path.basename(file.name!);
+  // optionally add disposition
+  if (fileOptions.disposition === 'attachment' && file.name) {
+    const filename = path.basename(file.name);
     resp.headers.set(
       'Content-Disposition',
       `${fileOptions.disposition}; filename="${filename}"`
     );
   } else if (fileOptions.disposition === 'inline') {
     resp.headers.set('Content-Disposition', 'inline');
   }
+  // optionally add headers
+  if (fileOptions.headers) {
+    const headers = new Headers(fileOptions.headers);
+    for (const [name, value] of Object.entries(headers)) {
+      resp.headers.set(name, value);
+    }
+  }
   return resp;
 }
 
@@ -80,6 +89,7 @@ async function buildFileResponse({
       headers: {
         'Content-Type': getMimeType(file),
         'Content-Length': String(file.size),
+        // Currently Bun overrides the Content-Length header to be 0
         'X-Content-Length': String(file.size),
         ...(acceptRanges ? { 'Accept-Ranges': 'bytes' } : {}),
       },