fetchWorker: support POST'ing (and FormData)

src/uploaders/ipfs.ts

@@ -1,5 +1,6 @@
 import { Conf } from '@/config.ts';
 import { z } from '@/deps.ts';
+import { fetchWorker } from '@/workers/fetch.ts';
 
 import type { Uploader } from './types.ts';
 
@@ -22,7 +23,7 @@ const ipfsUploader: Uploader = {
     const formData = new FormData();
     formData.append('file', file);
 
-    const response = await fetch(url, {
+    const response = await fetchWorker(url, {
       method: 'POST',
       body: formData,
     });
@@ -41,7 +42,7 @@ const ipfsUploader: Uploader = {
 
     url.search = query.toString();
 
-    await fetch(url, {
+    await fetchWorker(url, {
       method: 'POST',
     });
   },

src/workers/fetch.test.ts

@@ -4,10 +4,14 @@ import { fetchWorker } from './fetch.ts';
 
 await sleep(2000);
 
-Deno.test('fetchWorker', async () => {
+Deno.test({
+  name: 'fetchWorker',
+  async fn() {
     const response = await fetchWorker('https://example.com');
     const text = await response.text();
     assert(text.includes('Example Domain'));
+  },
+  sanitizeResources: false,
 });
 
 Deno.test({

src/workers/fetch.ts

@@ -11,11 +11,61 @@ const _worker = Comlink.wrap<typeof FetchWorker>(
   ),
 );
 
-const fetchWorker: typeof fetch = async (input, init) => {
+/**
-  const { signal, ...rest } = init || {};
+ * Fetch implementation with a Web Worker.
-  const url = input instanceof Request ? input.url : input.toString();
+ * Calling this performs the fetch in a separate CPU thread so it doesn't block the main thread.
-  const args = await _worker.fetch(url, rest, signal);
+ */
-  return new Response(...args);
+const fetchWorker: typeof fetch = async (...args) => {
+  const [url, init] = serializeFetchArgs(args);
+  const { body, signal, ...rest } = init;
+  const result = await _worker.fetch(url, { ...rest, body: await prepareBodyForWorker(body) }, signal);
+  return new Response(...result);
 };
 
+/** Take arguments to `fetch`, and turn them into something we can send over Comlink. */
+function serializeFetchArgs(args: Parameters<typeof fetch>): [string, RequestInit] {
+  const request = normalizeRequest(args);
+  const init = requestToInit(request);
+  return [request.url, init];
+}
+
+/** Get a `Request` object from arguments to `fetch`. */
+function normalizeRequest(args: Parameters<typeof fetch>): Request {
+  return new Request(...args);
+}
+
+/** Get the body as a type we can transfer over Web Workers. */
+async function prepareBodyForWorker(
+  body: BodyInit | undefined | null,
+): Promise<ArrayBuffer | Blob | string | undefined | null> {
+  if (!body || typeof body === 'string' || body instanceof ArrayBuffer || body instanceof Blob) {
+    return body;
+  } else {
+    const response = new Response(body);
+    return await response.arrayBuffer();
+  }
+}
+
+/**
+ * Convert a `Request` object into its serialized `RequestInit` format.
+ * `RequestInit` is a subset of `Request`, just lacking helper methods like `json()`,
+ * making it easier to serialize (exceptions: `body` and `signal`).
+ */
+function requestToInit(request: Request): RequestInit {
+  return {
+    method: request.method,
+    headers: [...request.headers.entries()],
+    body: request.body,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    mode: request.mode,
+    credentials: request.credentials,
+    cache: request.cache,
+    redirect: request.redirect,
+    integrity: request.integrity,
+    keepalive: request.keepalive,
+    signal: request.signal,
+  };
+}
+
 export { fetchWorker };