feat(request-state): add content-length header when opting out of stream (#270)

Author: forberg

.changeset/tiny-cars-sort.md

@@ -0,0 +1,7 @@
+---
+'@inox-tools/request-state': patch
+---
+
+Added calculation of the `Content-Length` header when opting out of streaming with an injected state.
+This ensures responses with an injected state include the correct `Content-Length` header.
+Unmodified responses (like `HEAD` or `304 Not Modified`) continue to work exactly as before, avoiding overwriting the existing `Content-Length` header with an empty size.

packages/request-state/e2e/basic.spec.ts

@@ -93,3 +93,17 @@ test('can set state to undefined', async ({ page }) => {
 	const regularResult = await page.locator('pre#regular-result').innerHTML();
 	expect(regularResult).toBe('hello');
 });
+
+test('has content-length header', async ({ request }) => {
+	server = await fixture.preview({});
+
+	const pageUrl = fixture.resolveUrl('/?name=John+Doe');
+
+	const response = await request.get(pageUrl);
+	console.log('STATUS:', response.status());
+	console.log('HEADERS:', response.headers());
+	expect(response.status()).toBe(200);
+	const contentLength = response.headers()['content-length'];
+	expect(contentLength).toBeDefined();
+	expect(Number(contentLength)).toBeGreaterThan(0);
+});

packages/request-state/src/runtime/middleware.ts

@@ -2,6 +2,8 @@ import { defineMiddleware } from 'astro/middleware';
 import { collectState } from './serverState.js';
 import { parse } from 'content-type';
 
+const encoder = new TextEncoder();
+
 export const onRequest = defineMiddleware(async (_, next) => {
 	const { getState, result } = await collectState(next);
 
@@ -19,17 +21,27 @@ export const onRequest = defineMiddleware(async (_, next) => {
 	const stateScript = state
 		? `<script class="it-astro-state" type="application/json+devalue">${state}</script>`
 		: null;
-	if (stateScript) {
-		const headCloseIndex = originalBody.indexOf('</head>');
-		if (headCloseIndex > -1) {
-			return new Response(
-				originalBody.slice(0, headCloseIndex) + stateScript + originalBody.slice(headCloseIndex),
-				result
-			);
-		} else {
-			return new Response(stateScript + originalBody, result);
-		}
+
+	if (!stateScript) {
+		return new Response(originalBody, result);
 	}
 
-	return new Response(originalBody, result);
+	const headCloseIndex = originalBody.indexOf('</head>');
+	const finalBody =
+		headCloseIndex > -1
+			? originalBody.slice(0, headCloseIndex) + stateScript + originalBody.slice(headCloseIndex)
+			: stateScript + originalBody;
+
+	// TextEncoder is also supported in CloudFlare Workers, so this should work in all environments Astro supports.
+	const encodedBody = encoder.encode(finalBody);
+	const contentLength = encodedBody.byteLength;
+
+	const headers = new Headers(result.headers);
+	headers.set('Content-Length', contentLength.toString());
+
+	return new Response(encodedBody, {
+		status: result.status,
+		statusText: result.statusText,
+		headers,
+	});
 });