From b51077c59854543b2c70ea2be825d68cfb567d8c Mon Sep 17 00:00:00 2001
From: clover caruso <git@paperclover.net>
Date: Thu, 29 Jan 2026 16:49:46 -0800
Subject: [PATCH] chore: swap arg order

---
 jsr.json     |  2 +-
 package.json |  1 -
 readme.md    | 18 +++++++++---------
 src/react.ts | 18 ++++++++----------
 4 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/jsr.json b/jsr.json
index c8aacea001f96e133b7e8f885ed1f9fb98dd9a53..ad9150526795d168d4f2fdc11f2ef5589fa1cca9 100644
--- a/jsr.json
+++ b/jsr.json
@@ -1,6 +1,6 @@
 {
   "name": "@clo/react-mutation",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "exports": {
     ".": "./src/mod.ts",
     "./tanstack-query.ts": "./src/tanstack-query.ts",
diff --git a/package.json b/package.json
index 18d9600449e773cf219aff4298c862ee21cd1c21..1c8db1c1e2b6832a6da1ca1b5d5ea48dd239b99d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,5 @@
 {
   "name": "@clo/react-mutation",
-  "version": "0.1.0",
   "private": true,
   "description": "",
   "license": "ISC",
diff --git a/readme.md b/readme.md
index 726130622eb02f314e09145e00f8512b6120e821..7d060ac1ad525d191a0f955a0bb329ac98606452 100644
--- a/readme.md
+++ b/readme.md
@@ -21,7 +21,7 @@ The primary gains React Mutation provides are
   this power in more detail.
 - Easy debouncing and batching utilities.
 
-## Usage
+## Setup
 
 React Mutation starts with a `MutationClient`, which shares global state for an application.
 
@@ -61,7 +61,7 @@ export const mutations = new MutationClient({
 });
 ```
 
-### Declaring Mutations
+## Declaring Mutations
 
 With a mutation client, you can declare mutations with `mutations.define()`.
 Start with the API call code, and then add an optimistic updater function.
@@ -121,7 +121,7 @@ export function Example({ id }: { id: string }) {
 ```
 
 
-### Optimistic Updates
+## Optimistic Updates
 
 The `optimistic` function is given an object with the following APIs
 
@@ -132,7 +132,7 @@ The `optimistic` function is given an object with the following APIs
 - `onRestore` - add a callback to revert your optimistic update
 - `onRefetch` - add a callback to fetch data after a success
 
-#### React Query Optimistic Helpers
+### React Query Optimistic Helpers
 
 When using React Query, you can opt into some incredible helpers for making it
 very easy to write Optimistic Updates. Our setup at work is with this client
@@ -191,7 +191,7 @@ automatically implement `onRefetch` and `onRestore` callbacks. The current list
   - `objArrayUpdate` - update items in array by `filter` + `update`
   - `objArrayInsertIndex` - insert an item in an array at an index
 
-### Debouncing
+## Debouncing
 
 By default, a mutation will block the UI (by setting isPending). If you add
 `debounceMs`, the mutation will no longer set isPending. Multiple mutations
@@ -226,7 +226,7 @@ function Item({ id }: { id: string }) {
 }
 ```
 
-### Calling Mutations
+## Calling Mutations
 
 Three methods exist for calling mutations:
 
@@ -234,7 +234,7 @@ Three methods exist for calling mutations:
 - From a React component: `useMutate(mutDoAction)`
 - From a React Element: `<MutationButton>`
 
-#### The `useMutate` Hook
+### The `useMutate` Hook
 
 The `useMutate(null | Mutation)` react hook returns an object with the following properties.
 
@@ -269,7 +269,7 @@ return (
 );
 ```
 
-#### Mutation Buttons
+### Mutation Buttons
 
 You can wrap your button component with `createMutationButton` to make it support mutations
 
@@ -312,7 +312,7 @@ It can now be used for easy mutations:
 
 
 
-### Batched Mutations
+## Batched Mutations
 
 Each call to the mutation applies new optimistic state on top of the previous,
 and after a debounce / throttle, the new optimistic state is committed to the
diff --git a/src/react.ts b/src/react.ts
index 604c95f457146f56867aa261bb47e4768dc9a993..2d8dac06a9d527d9b9d6246c2e1fb0854c709eed 100644
--- a/src/react.ts
+++ b/src/react.ts
@@ -42,8 +42,7 @@ export type UseMutateResult<Args extends unknown[], Result> =
 export interface UseMutateResultBase<Args extends unknown[], Result> {
   run: (...args: Args) => void;
   runWithOptions: (
-    options: RunOptions<Result>,
-    ...args: Args
+    ..._: [...args: Args, options: RunOptions<Result>]
   ) => Promise<Result>;
   clear: () => void;
 }
@@ -243,10 +242,13 @@ class Observer<Args extends unknown[], Result> {
     return promise;
   }
 
-  runWithOptions(options: RunOptions<Result>, ...args: Args): void {
+  runWithOptions(...array: [...args: Args, options: RunOptions<Result>]): void {
     const mutation = this.mutation;
     if (!mutation) return;
 
+    const args = array.slice() as Args;
+    const options = args.pop() as RunOptions<Result>;
+
     this.currentArgs = args;
     const key = mutation.key(args);
 
@@ -295,12 +297,8 @@ class Observer<Args extends unknown[], Result> {
   }
 
   binding: UseMutateResult<Args, Result> = ((self: this) => ({
-    run(...args) {
-      return self.run(...args);
-    },
-    runWithOptions(options, ...args) {
-      return self.runWithOptions(options, ...args);
-    },
+    run: self.run.bind(self),
+    runWithOptions: self.runWithOptions.bind(self),
     clear() {
       self.setState({
         status: ["error", "success"].includes(self.state.status)
@@ -459,8 +457,8 @@ function GenericMutationButton<
         const computedArgs = typeof args === "function" ? args(e) : args;
         if (!computedArgs || e.defaultPrevented) return;
         state.runWithOptions(
-          { onSuccess, onError, onSettled },
           ...computedArgs,
+          { onSuccess, onError, onSettled },
         );
       }, [state]),
       isPending: state.isPending,
-- 
2.54.0