@remix-run/method-override-middleware 0.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,67 @@
+# method-override-middleware
+
+Middleware for overriding HTTP request methods from form data for use with [`@remix-run/fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router).
+
+Allows HTML forms (which only support GET and POST) to submit with other HTTP methods like PUT, PATCH, or DELETE by including a special form field.
+
+## Installation
+
+```sh
+npm install @remix-run/method-override-middleware
+```
+
+## Usage
+
+This middleware runs after [the `formData` middleware](https://github.com/remix-run/remix/tree/main/packages/form-data-middleware) and updates the request context's `context.method` with the value of the method override field. This is useful for simulating RESTful API request methods like PUT and DELETE using HTML forms.
+
+```ts
+import { createRouter } from '@remix-run/fetch-router'
+import { formData } from '@remix-run/form-data-middleware'
+import { methodOverride } from '@remix-run/method-override-middleware'
+
+let router = createRouter({
+  // methodOverride must come AFTER formData middleware
+  middleware: [formData(), methodOverride()],
+})
+
+router.delete('/users/:id', async (context) => {
+  let userId = context.params.id
+  // Delete user logic...
+  return new Response('User deleted')
+})
+```
+
+In your HTML form:
+
+```html
+<form method="POST" action="/users/123">
+  <input type="hidden" name="_method" value="DELETE" />
+  <button type="submit">Delete User</button>
+</form>
+```
+
+### Custom Field Name
+
+You can customize the name of the method override field by passing a `fieldName` option to the `methodOverride()` middleware.
+
+```ts
+let router = createRouter({
+  middleware: [formData(), methodOverride({ fieldName: '__method__' })],
+})
+```
+
+```html
+<form method="POST" action="/users/123">
+  <input type="hidden" name="__method__" value="PUT" />
+  <button type="submit">Update User</button>
+</form>
+```
+
+## Related Packages
+
+- [`fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router) - Router for the web Fetch API
+- [`form-data-middleware`](https://github.com/remix-run/remix/tree/main/packages/form-data-middleware) - Required for parsing form data
+
+## License
+
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { type MethodOverrideOptions, methodOverride } from './lib/method-override.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/index.js

@@ -0,0 +1 @@
+export { methodOverride } from "./lib/method-override.js";

package/dist/lib/method-override.d.ts

@@ -0,0 +1,19 @@
+import type { Middleware } from '@remix-run/fetch-router';
+export interface MethodOverrideOptions {
+    /**
+     * The name of the form field to check for request method override.
+     * Default is `_method`.
+     */
+    fieldName?: string;
+}
+/**
+ * Middleware that overrides `context.method` with the value of the method override field.
+ *
+ * Note: This middleware must be placed after the `formData` middleware in the middleware chain, or
+ * some other middleware that provides `context.formData`.
+ *
+ * @param options (optional) Options for the method override middleware
+ * @returns A middleware that overrides `context.method` with the value of the method override field
+ */
+export declare function methodOverride(options?: MethodOverrideOptions): Middleware;
+//# sourceMappingURL=method-override.d.ts.map

package/dist/lib/method-override.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"method-override.d.ts","sourceRoot":"","sources":["../../src/lib/method-override.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,yBAAyB,CAAA;AAEzE,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,qBAAqB,GAAG,UAAU,CAoB1E"}

package/dist/lib/method-override.js

@@ -0,0 +1,27 @@
+const RequestMethods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'];
+/**
+ * Middleware that overrides `context.method` with the value of the method override field.
+ *
+ * Note: This middleware must be placed after the `formData` middleware in the middleware chain, or
+ * some other middleware that provides `context.formData`.
+ *
+ * @param options (optional) Options for the method override middleware
+ * @returns A middleware that overrides `context.method` with the value of the method override field
+ */
+export function methodOverride(options) {
+    let fieldName = options?.fieldName ?? '_method';
+    return async (context) => {
+        let formData = context.formData;
+        if (formData == null) {
+            return;
+        }
+        let method = formData.get(fieldName);
+        if (typeof method !== 'string') {
+            return;
+        }
+        let requestMethod = method.toUpperCase();
+        if (RequestMethods.includes(requestMethod)) {
+            context.method = requestMethod;
+        }
+    };
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@remix-run/method-override-middleware",
+  "version": "0.0.0",
+  "description": "Middleware for overriding HTTP request methods from form data",
+  "author": "Michael Jackson <mjijackson@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/remix-run/remix.git",
+    "directory": "packages/method-override-middleware"
+  },
+  "homepage": "https://github.com/remix-run/remix/tree/main/packages/method-override-middleware#readme",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist",
+    "src",
+    "!src/**/*.test.ts"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.0",
+    "typescript": "^5.9.3",
+    "@remix-run/fetch-router": "0.9.0",
+    "@remix-run/form-data-middleware": "0.0.0"
+  },
+  "peerDependencies": {
+    "@remix-run/fetch-router": "^0.9.0"
+  },
+  "keywords": [
+    "fetch",
+    "router",
+    "middleware",
+    "method-override",
+    "http-method"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "git clean -fdX",
+    "test": "node --disable-warning=ExperimentalWarning --test './src/**/*.test.ts'",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { type MethodOverrideOptions, methodOverride } from './lib/method-override.ts'
+

package/src/lib/method-override.ts

@@ -0,0 +1,44 @@
+import type { Middleware, RequestContext } from '@remix-run/fetch-router'
+
+export interface MethodOverrideOptions {
+  /**
+   * The name of the form field to check for request method override.
+   * Default is `_method`.
+   */
+  fieldName?: string
+}
+
+const RequestMethods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'] as const
+
+type RequestMethod = (typeof RequestMethods)[number]
+
+/**
+ * Middleware that overrides `context.method` with the value of the method override field.
+ *
+ * Note: This middleware must be placed after the `formData` middleware in the middleware chain, or
+ * some other middleware that provides `context.formData`.
+ *
+ * @param options (optional) Options for the method override middleware
+ * @returns A middleware that overrides `context.method` with the value of the method override field
+ */
+export function methodOverride(options?: MethodOverrideOptions): Middleware {
+  let fieldName = options?.fieldName ?? '_method'
+
+  return async (context: RequestContext) => {
+    let formData = context.formData
+    if (formData == null) {
+      return
+    }
+
+    let method = formData.get(fieldName)
+    if (typeof method !== 'string') {
+      return
+    }
+
+    let requestMethod = method.toUpperCase() as RequestMethod
+
+    if (RequestMethods.includes(requestMethod)) {
+      context.method = requestMethod
+    }
+  }
+}