Allow fetching ArrayBufferView request body types (#7065)

* Allow all supported request body types

* Calculating a hash from the body of a cloned request

* Add Blob to globals

* Hash FormData

* Remove unnecessary await

* Only a string and ArrayBufferView as request body

* Create itchy-jobs-report.md

* Create tricky-experts-tan.md

Co-authored-by: Rich Harris <[email protected]>

Author: repsac-by

.changeset/itchy-jobs-report.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+Allow TypedArray request bodies in `fetch` in `load`

.changeset/tricky-experts-tan.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+Use `FormData` polyfill from `undici` rather than `node-fetch`

packages/kit/src/exports/node/polyfills.js

@@ -1,7 +1,7 @@
-import { fetch, Response, Request, Headers } from 'undici';
+import { fetch, Response, Request, Headers, FormData } from 'undici';
 import { ReadableStream, TransformStream, WritableStream } from 'stream/web';
 import { Readable } from 'stream';
-import { Request as NodeFetchRequest, FormData } from 'node-fetch';
+import { Request as NodeFetchRequest } from 'node-fetch';
 import { webcrypto as crypto } from 'crypto';
 
 /** @type {Record<string, any>} */
@@ -13,12 +13,18 @@ const globals = {
 	// https://github.com/nodejs/undici/issues/974
 	Request: class extends Request {
 		// @ts-expect-error
-		formData() {
-			return new NodeFetchRequest(this.url, {
+		async formData() {
+			const nodeFetchFormData = await new NodeFetchRequest(this.url, {
 				method: this.method,
 				headers: this.headers,
 				body: this.body && Readable.from(this.body)
 			}).formData();
+
+			const formData = new FormData();
+			for (const [name, value] of nodeFetchFormData.entries()) {
+				formData.append(name, value);
+			}
+			return formData;
 		}
 	},
 	Headers,

packages/kit/src/runtime/client/fetcher.js

@@ -71,7 +71,7 @@ export function initial_fetch(resource, resolved, opts) {
 
 	let selector = `script[data-sveltekit-fetched][data-url=${url}]`;
 
-	if (opts && typeof opts.body === 'string') {
+	if (opts?.body && (typeof opts.body === 'string' || ArrayBuffer.isView(opts.body))) {
 		selector += `[data-hash="${hash(opts.body)}"]`;
 	}
 

packages/kit/src/runtime/hash.js

@@ -4,12 +4,16 @@
  */
 export function hash(value) {
 	let hash = 5381;
-	let i = value.length;
 
 	if (typeof value === 'string') {
+		let i = value.length;
 		while (i) hash = (hash * 33) ^ value.charCodeAt(--i);
+	} else if (ArrayBuffer.isView(value)) {
+		const buffer = new Uint8Array(value.buffer, value.byteOffset, value.byteLength);
+		let i = buffer.length;
+		while (i) hash = (hash * 33) ^ buffer[--i];
 	} else {
-		while (i) hash = (hash * 33) ^ value[--i];
+		throw new TypeError('value must be a string or TypedArray');
 	}
 
 	return (hash >>> 0).toString(36);

packages/kit/src/runtime/server/page/fetch.js

@@ -165,13 +165,13 @@ export function create_fetch({ event, options, state, route, prerender_default,
 					}
 				}
 
-				if (request_body && typeof request_body !== 'string') {
+				if (request_body && typeof request_body !== 'string' && !ArrayBuffer.isView(request_body)) {
 					// TODO is this still necessary? we just bail out below
 					// per https://developer.mozilla.org/en-US/docs/Web/API/Request/Request, this can be a
 					// Blob, BufferSource, FormData, URLSearchParams, USVString, or ReadableStream object.
 					// non-string bodies are irksome to deal with, but luckily aren't particularly useful
 					// in this context anyway, so we take the easy route and ban them
-					throw new Error('Request body must be a string');
+					throw new Error('Request body must be a string or TypedArray');
 				}
 
 				response = await respond(request, options, {
@@ -220,7 +220,7 @@ export function create_fetch({ event, options, state, route, prerender_default,
 								? request.url.slice(event.url.origin.length)
 								: request.url,
 							method: request.method,
-							request_body: /** @type {string | undefined} */ (request_body),
+							request_body: /** @type {string | ArrayBufferView | undefined} */ (request_body),
 							response_body: body,
 							response: response
 						});

packages/kit/src/runtime/server/page/types.d.ts

@@ -4,7 +4,7 @@ import { SSRNode, CspDirectives } from 'types';
 export interface Fetched {
 	url: string;
 	method: string;
-	request_body?: string | null;
+	request_body?: string | ArrayBufferView | null;
 	response_body: string;
 	response: Response;
 }

packages/kit/test/apps/basics/src/routes/load/raw-body/+page.svelte

@@ -1,7 +1,3 @@
-<script>
-	/** @type {import('./$types').PageData} */
-	export let data;
-</script>
-
-<pre class="parsed">{JSON.stringify(data.body)}</pre>
-<pre class="raw">{data.rawBody}</pre>
+<a href="/load/raw-body/dataview">DataView</a>
+<a href="/load/raw-body/string">String</a>
+<a href="/load/raw-body/uint8array">Uint8Array</a>

packages/kit/test/apps/basics/src/routes/load/raw-body/dataview/+page.js

@@ -0,0 +1,13 @@
+/** @type {import('@sveltejs/kit').Load} */
+export async function load({ fetch }) {
+	const data = new TextEncoder().encode('{ "oddly" : { "formatted" : "json" } }');
+	const res = await fetch('/load/raw-body.json', {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/octet-stream'
+		},
+		body: new DataView(data.buffer, data.byteOffset, data.byteLength)
+	});
+
+	return await res.json();
+}

packages/kit/test/apps/basics/src/routes/load/raw-body/dataview/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+	/** @type {import('./$types').PageData} */
+	export let data;
+</script>
+
+<pre class="parsed">{JSON.stringify(data.body)}</pre>
+<pre class="raw">{data.rawBody}</pre>