feat: replace node-fetch with @remix-run/web-fetch

.github/workflows/test.yml

@@ -151,15 +151,15 @@ jobs:
         id: playwright-cache
         with:
           path: ${{ matrix.playwright_binary_path }}
-          key: ${{ runner.os }}-cache-playwright-${{ steps.playwright-version.outputs.version }}
+          key: ${{ runner.os }}-${{ runner.arch }}-cache-playwright-${{ steps.playwright-version.outputs.version }}
 
       - name: 🖨️ Playwright info
         shell: bash
         run: |
           echo "OS: ${{ matrix.os }}"
           echo "Playwright version: ${{ steps.playwright-version.outputs.version }}"
           echo "Playwright install dir: ${{ matrix.playwright_binary_path }}"
-          echo "Cache key: ${{ runner.os }}-cache-playwright-${{ steps.playwright-version.outputs.version }}"
+          echo "Cache key: ${{ runner.os }}-${{ runner.arch }}-cache-playwright-${{ steps.playwright-version.outputs.version }}"
           echo "Cache hit: ${{ steps.playwright-cache.outputs.cache-hit == 'true' }}"
 
       - name: 📥 Install Playwright

.gitignore

@@ -11,6 +11,7 @@ yarn-error.log
 /fixtures/deno-app
 /playwright-report
 /test-results
+/uploads
 
 .eslintcache
 .tmp

docs/api/conventions.md

@@ -546,7 +546,7 @@ export default function SomeRouteComponent() {
 
 <docs-success>Watch the <a href="https://www.youtube.com/playlist?list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">📼 Remix Single</a>: <a href="https://www.youtube.com/watch?v=NXqEP_PsPNc&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6">Loading data into components</a></docs-success>
 
-Each route can define a "loader" function that will be called on the server before rendering to provide data to the route.
+Each route can define a "loader" function that will be called on the server before rendering to provide data to the route. You may think of this as a "GET" request handler in that you should not be reading the body of the request; that is the job of an [`action`](#action).
 
 ```js
 import { json } from "@remix-run/{runtime}";

docs/api/remix.md

@@ -1523,7 +1523,7 @@ return new Response(null, {
 });
 ```
 
-## `unstable_parseMultipartFormData` (node)
+## `unstable_parseMultipartFormData`
 
 Allows you to handle multipart forms (file uploads) for your app.
 
@@ -1572,7 +1572,7 @@ export default function AvatarUploadRoute() {
 
 ### `uploadHandler`
 
-The `uploadHandler` is the key to the whole thing. It's responsible for what happens to the file as it's being streamed from the client. You can save it to disk, store it in memory, or act as a proxy to send it somewhere else (like a file storage provider).
+The `uploadHandler` is the key to the whole thing. It's responsible for what happens to the multipart/form-data parts as they are being streamed from the client. You can save it to disk, store it in memory, or act as a proxy to send it somewhere else (like a file storage provider).
 
 Remix has two utilities to create `uploadHandler`s for you:
 
@@ -1581,26 +1581,32 @@ Remix has two utilities to create `uploadHandler`s for you:
 
 These are fully featured utilities for handling fairly simple use cases. It's not recommended to load anything but quite small files into memory. Saving files to disk is a reasonable solution for many use cases. But if you want to upload the file to a file hosting provider, then you'll need to write your own.
 
-#### `unstable_createFileUploadHandler`
+#### `unstable_createFileUploadHandler (node)`
+
+An upload handler that will write parts with a filename to disk to keep them out of memory, parts without a filename will not be parsed. Should be composed with another upload handler.
 
 **Example:**
 
 ```tsx
 export const action: ActionFunction = async ({
   request,
 }) => {
-  const uploadHandler = unstable_createFileUploadHandler({
-    maxFileSize: 5_000_000,
-    file: ({ filename }) => filename,
-  });
+  const uploadHandler = unstable_composeUploadHandlers(
+    unstable_createFileUploadHandler({
+      maxPartSize: 5_000_000,
+      file: ({ filename }) => filename,
+    }),
+    // parse everything else into memory
+    unstable_createMemoryUploadHandler()
+  );
   const formData = await unstable_parseMultipartFormData(
     request,
     uploadHandler
   );
 
   const file = formData.get("avatar");
 
-  // file is a "NodeFile" which has a similar API to "File"
+  // file is a "NodeOnDiskFile" which implements the "File" API
   // ... etc
 };
 ```
@@ -1612,7 +1618,7 @@ export const action: ActionFunction = async ({
 | avoidFileConflicts | boolean            | true                            | Avoid file conflicts by appending a timestamp on the end of the filename if it already exists on disk                                                     |
 | directory          | string \| Function | os.tmpdir()                     | The directory to write the upload.                                                                                                                        |
 | file               | Function           | () => `upload_${random}.${ext}` | The name of the file in the directory. Can be a relative path, the directory structure will be created if it does not exist.                              |
-| maxFileSize        | number             | 3000000                         | The maximum upload size allowed (in bytes). If the size is exceeded an error will be thrown.                                                              |
+| maxPartSize        | number             | 3000000                         | The maximum upload size allowed (in bytes). If the size is exceeded a MaxPartSizeExceededError will be thrown.                                            |
 | filter             | Function           | OPTIONAL                        | A function you can write to prevent a file upload from being saved based on filename, mimetype, or encoding. Return `false` and the file will be ignored. |
 
 The function API for `file` and `directory` are the same. They accept an `object` and return a `string`. The object it accepts has `filename`, `encoding`, and `mimetype` (all strings).The `string` returned is the path.
@@ -1628,7 +1634,7 @@ export const action: ActionFunction = async ({
   request,
 }) => {
   const uploadHandler = unstable_createMemoryUploadHandler({
-    maxFileSize: 500_000,
+    maxPartSize: 500_000,
   });
   const formData = await unstable_parseMultipartFormData(
     request,
@@ -1642,7 +1648,7 @@ export const action: ActionFunction = async ({
 };
 ```
 
-**Options:** The only options supported are `maxFileSize` and `filter` which work the same as in `unstable_createFileUploadHandler` above. This API is not recommended for anything at scale, but is a convenient utility for simple use cases.
+**Options:** The only options supported are `maxPartSize` and `filter` which work the same as in `unstable_createFileUploadHandler` above. This API is not recommended for anything at scale, but is a convenient utility for simple use cases and as a fallback for another handler.
 
 ### Custom `uploadHandler`
 
@@ -1652,64 +1658,58 @@ Most of the time, you'll probably want to proxy the file stream to a file host.
 
 ```tsx
 import type { UploadHandler } from "@remix-run/{runtime}";
+import {
+  unstable_composeUploadHandlers,
+  unstable_createMemoryUploadHandler,
+} from "@remix-run/{runtime}";
+// writeAsyncIterableToWritable is a node only utility
+import { writeAsyncIterableToWritable } from "@remix-run/node";
 import type {
-  UploadApiErrorResponse,
   UploadApiOptions,
   UploadApiResponse,
   UploadStream,
 } from "cloudinary";
 import cloudinary from "cloudinary";
 
+async function uploadImageToCloudinary(data: AsyncIterable<Uint8Array>) {
+  const uploadPromise = new Promise<UploadApiResponse>(async (resolve, reject) => {
+    const uploadStream = cloudinary.v2.uploader.upload_stream(
+      {
+        folder: "remix",
+      },
+      (error, result) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        resolve(result);
+      }
+    );
+    await writeAsyncIterableToWritable(data, uploadStream);
+  });
+
+  return uploadPromise;
+}
+
 export const action: ActionFunction = async ({
   request,
 }) => {
   const userId = getUserId(request);
 
-  function uploadStreamToCloudinary(
-    stream: Readable,
-    options?: UploadApiOptions
-  ): Promise<UploadApiResponse | UploadApiErrorResponse> {
-    return new Promise((resolve, reject) => {
-      const uploader = cloudinary.v2.uploader.upload_stream(
-        options,
-        (error, result) => {
-          if (result) {
-            resolve(result);
-          } else {
-            reject(error);
-          }
+  const uploadHandler =
+    unstable_composeUploadHandlers(
+      // our custom upload handler
+      async ({ name, contentType, data, filename }) => {
+        if (name !== "img") {
+          return undefined;
         }
-      );
-
-      stream.pipe(uploader);
-    });
-  }
-
-  const uploadHandler: UploadHandler = async ({
-    name,
-    stream,
-  }) => {
-    // we only care about the file form field called "avatar"
-    // so we'll ignore anything else
-    // NOTE: the way our form is set up, we shouldn't get any other fields,
-    // but this is good defensive programming in case someone tries to hit our
-    // action directly via curl or something weird like that.
-    if (name !== "avatar") {
-      stream.resume();
-      return;
-    }
-
-    const uploadedImage = await uploadStreamToCloudinary(
-      stream,
-      {
-        public_id: userId,
-        folder: "/my-site/avatars",
-      }
+        const uploadedImage = await uploadImageToCloudinary(data);
+        return uploadedImage.secure_url;
+      },
+      // fallback to memory for everything else
+      unstable_createMemoryUploadHandler()
     );
 
-    return uploadedImage.secure_url;
-  };
-
   const formData = await unstable_parseMultipartFormData(
     request,
     uploadHandler

docs/decisions/0002-do-not-clone-request.md

@@ -0,0 +1,19 @@
+# Do not clone request
+
+ Date: 2022-05-13
+
+ Status: accepted
+
+ ## Context
+
+ To allow multiple loaders / actions to read the body of a request, we have been cloning the request before forwarding it to user-code. This is not the best thing to do as some runtimes will begin buffering the body to allow for multiple consumers. It is also goes against "the platform" that states a request body should only be consumed once.
+
+ ## Decision
+
+ Do not clone requests before they are passed to user-code (loaders, actions, handleDocumentRequest, handleDataRequest, etc.).
+
+ ## Consequences
+
+If you are reading the request body in both an action and a loader this will now fail. Loaders should be thought of as a "GET" / "HEAD" request handler. These request methods are not allowed to have a body, therefore you should not be reading it in your Remix loader function.
+
+If you wish to continue reading the request body in multiple places for a single request against recommendations, consider using `.clone()` before reading it; just know this comes with tradeoffs.

docs/decisions/template.md

@@ -0,0 +1,11 @@
+# Title
+
+ Date: YYYY-MM-DD
+
+ Status: proposed | rejected | accepted | deprecated | … | superseded by [0005](0005-example.md)
+
+ ## Context
+
+ ## Decision
+
+ ## Consequences

docs/pages/gotchas.md

@@ -65,7 +65,7 @@ So instead of doing:
 import { unstable_createFileUploadHandler } from "@remix-run/{runtime}";
 
 const uploadHandler = unstable_createFileUploadHandler({
-  maxFileSize: 5_000_000,
+  maxPartSize: 5_000_000,
   file: ({ filename }) => filename,
 });
 
@@ -81,7 +81,7 @@ import { unstable_createFileUploadHandler } from "@remix-run/{runtime}";
 
 export async function action() {
   const uploadHandler = unstable_createFileUploadHandler({
-    maxFileSize: 5_000_000,
+    maxPartSize: 5_000_000,
     file: ({ filename }) => filename,
   });
 

examples/file-and-cloudinary-upload/app/routes/cloudinary-upload.tsx

@@ -1,5 +1,10 @@
 import type { ActionFunction, UploadHandler } from "@remix-run/node";
-import { json, unstable_parseMultipartFormData } from "@remix-run/node";
+import {
+  json,
+  unstable_composeUploadHandlers as composeUploadHandlers,
+  unstable_createMemoryUploadHandler as createMemoryUploadHandler,
+  unstable_parseMultipartFormData as parseMultipartFormData
+} from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
 
 import { uploadImage } from "~/utils/utils.server";
@@ -11,16 +16,18 @@ type ActionData = {
 };
 
 export const action: ActionFunction = async ({ request }) => {
-  const uploadHandler: UploadHandler = async ({ name, stream }) => {
-    if (name !== "img") {
-      stream.resume();
-      return;
-    }
-    const uploadedImage = await uploadImage(stream);
-    return uploadedImage.secure_url;
-  };
+  const uploadHandler: UploadHandler = composeUploadHandlers(
+    async ({ name, contentType, data, filename }) => {
+      if (name !== "img") {
+        return undefined;
+      }
+      const uploadedImage = await uploadImage(data);
+      return uploadedImage.secure_url;
+    },
+    createMemoryUploadHandler()
+  );
 
-  const formData = await unstable_parseMultipartFormData(
+  const formData = await parseMultipartFormData(
     request,
     uploadHandler
   );

examples/file-and-cloudinary-upload/app/routes/local-upload.tsx

@@ -1,8 +1,10 @@
 import type { ActionFunction } from "@remix-run/node";
 import {
   json,
-  unstable_createFileUploadHandler,
-  unstable_parseMultipartFormData,
+  unstable_composeUploadHandlers as composeUploadHandlers,
+  unstable_createFileUploadHandler as createFileUploadHandler,
+  unstable_createMemoryUploadHandler as createMemoryUploadHandler,
+  unstable_parseMultipartFormData as parseMultipartFormData,
 } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
 
@@ -12,16 +14,16 @@ type ActionData = {
 };
 
 export const action: ActionFunction = async ({ request }) => {
-  const uploadHandler = unstable_createFileUploadHandler({
-    directory: "public",
-    maxFileSize: 30000,
-  });
-  const formData = await unstable_parseMultipartFormData(
-    request,
-    uploadHandler
+  const uploadHandler = composeUploadHandlers(
+    createFileUploadHandler({
+      directory: "public/uploads",
+      maxPartSize: 30000,
+    }),
+    createMemoryUploadHandler()
   );
+  const formData = await parseMultipartFormData(request, uploadHandler);
   const image = formData.get("img");
-  if (!image) {
+  if (!image || typeof image === "string") {
     return json({
       error: "something wrong",
     });

examples/file-and-cloudinary-upload/app/utils/utils.server.ts

@@ -1,27 +1,30 @@
 import cloudinary from "cloudinary";
-import type { Stream } from "stream";
+import { writeAsyncIterableToWritable } from "@remix-run/node";
 
 cloudinary.v2.config({
   cloud_name: process.env.CLOUD_NAME,
   api_key: process.env.API_KEY,
   api_secret: process.env.API_SECRET,
 });
 
-async function uploadImage(fileStream: Stream) {
-  return new Promise((resolve, reject) => {
+async function uploadImage(data: AsyncIterable<Uint8Array>) {
+  const uploadPromise = new Promise(async (resolve, reject) => {
     const uploadStream = cloudinary.v2.uploader.upload_stream(
       {
         folder: "remix",
       },
       (error, result) => {
         if (error) {
           reject(error);
+          return;
         }
         resolve(result);
       }
     );
-    fileStream.pipe(uploadStream);
+    await writeAsyncIterableToWritable(data, uploadStream);
   });
+
+  return uploadPromise;
 }
 
 console.log("configs", cloudinary.v2.config());