Commit b51077c59854543b2c70ea2be825d68cfb567d8c | react-mutation

author	clover caruso <git@paperclover.net> 2026-01-29 16:49:46-08:00
committer	clover caruso <git@paperclover.net> 2026-01-29 16:57:23-08:00
log	b51077c59854543b2c70ea2be825d68cfb567d8c
tree	3449d3519625c9bb4232125795e3004322a32d05
parent	f62d1ee915bf4e77c8e2d55d1286211289fbdd51
signature	Commit is signed but in an unrecognized format.

chore: swap arg order

4 files changed, 18 insertions(+), 21 deletions(-)

jsr.json+1-1

...	@@ -1,6 +1,6 @@	...	@@ -1,6 +1,6 @@
1	{	1	{
2	"name": "@clo/react-mutation",	2	"name": "@clo/react-mutation",
3	"version": "1.0.0-beta.6",	3	"version": "1.0.0-beta.7",
4	"exports": {	4	"exports": {
5	".": "./src/mod.ts",	5	".": "./src/mod.ts",
6	"./tanstack-query.ts": "./src/tanstack-query.ts",	6	"./tanstack-query.ts": "./src/tanstack-query.ts",

package.json-1

...	@@ -1,6 +1,5 @@	...	@@ -1,6 +1,5 @@
1	{	1	{
2	"name": "@clo/react-mutation",	2	"name": "@clo/react-mutation",
3	"version": "0.1.0",
4	"private": true,	3	"private": true,
5	"description": "",	4	"description": "",
6	"license": "ISC",	5	"license": "ISC",

readme.md+9-9

src/react.ts+8-10

 @@ -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, options: RunOptions<Result>]
-    ...args: Args
   ) => 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) {
+    run: self.run.bind(self),
-      return self.run(...args);
+    runWithOptions: self.runWithOptions.bind(self),
-    },
-    runWithOptions(options, ...args) {
-      return self.runWithOptions(options, ...args);
-    },
     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,

...	@@ -21,7 +21,7 @@ The primary gains React Mutation provides are	...	@@ -21,7 +21,7 @@ The primary gains React Mutation provides are
21	this power in more detail.	21	this power in more detail.
22	- Easy debouncing and batching utilities.	22	- Easy debouncing and batching utilities.
23		23
24	## Usage	24	## Setup
25		25
26	React Mutation starts with a `MutationClient`, which shares global state for an application.	26	React Mutation starts with a `MutationClient`, which shares global state for an application.
27		27
...	@@ -61,7 +61,7 @@ export const mutations = new MutationClient({	...	@@ -61,7 +61,7 @@ export const mutations = new MutationClient({
61	});	61	});
62	```	62	```
63		63
64	### Declaring Mutations	64	## Declaring Mutations
65		65
66	With a mutation client, you can declare mutations with `mutations.define()`.	66	With a mutation client, you can declare mutations with `mutations.define()`.
67	Start with the API call code, and then add an optimistic updater function.	67	Start with the API call code, and then add an optimistic updater function.
...	@@ -121,7 +121,7 @@ export function Example({ id }: { id: string }) {	...	@@ -121,7 +121,7 @@ export function Example({ id }: { id: string }) {
121	```	121	```
122		122
123		123
124	### Optimistic Updates	124	## Optimistic Updates
125		125
126	The `optimistic` function is given an object with the following APIs	126	The `optimistic` function is given an object with the following APIs
127		127
...	@@ -132,7 +132,7 @@ 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
132	- `onRestore` - add a callback to revert your optimistic update	132	- `onRestore` - add a callback to revert your optimistic update
133	- `onRefetch` - add a callback to fetch data after a success	133	- `onRefetch` - add a callback to fetch data after a success
134		134
135	#### React Query Optimistic Helpers	135	### React Query Optimistic Helpers
136		136
137	When using React Query, you can opt into some incredible helpers for making it	137	When using React Query, you can opt into some incredible helpers for making it
138	very easy to write Optimistic Updates. Our setup at work is with this client	138	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	...	@@ -191,7 +191,7 @@ automatically implement `onRefetch` and `onRestore` callbacks. The current list
191	- `objArrayUpdate` - update items in array by `filter` + `update`	191	- `objArrayUpdate` - update items in array by `filter` + `update`
192	- `objArrayInsertIndex` - insert an item in an array at an index	192	- `objArrayInsertIndex` - insert an item in an array at an index
193		193
194	### Debouncing	194	## Debouncing
195		195
196	By default, a mutation will block the UI (by setting isPending). If you add	196	By default, a mutation will block the UI (by setting isPending). If you add
197	`debounceMs`, the mutation will no longer set isPending. Multiple mutations	197	`debounceMs`, the mutation will no longer set isPending. Multiple mutations
...	@@ -226,7 +226,7 @@ function Item({ id }: { id: string }) {	...	@@ -226,7 +226,7 @@ function Item({ id }: { id: string }) {
226	}	226	}
227	```	227	```
228		228
229	### Calling Mutations	229	## Calling Mutations
230		230
231	Three methods exist for calling mutations:	231	Three methods exist for calling mutations:
232		232
...	@@ -234,7 +234,7 @@ Three methods exist for calling mutations:	...	@@ -234,7 +234,7 @@ Three methods exist for calling mutations:
234	- From a React component: `useMutate(mutDoAction)`	234	- From a React component: `useMutate(mutDoAction)`
235	- From a React Element: `<MutationButton>`	235	- From a React Element: `<MutationButton>`
236		236
237	#### The `useMutate` Hook	237	### The `useMutate` Hook
238		238
239	The `useMutate(null \| Mutation)` react hook returns an object with the following properties.	239	The `useMutate(null \| Mutation)` react hook returns an object with the following properties.
240		240
...	@@ -269,7 +269,7 @@ return (	...	@@ -269,7 +269,7 @@ return (
269	);	269	);
270	```	270	```
271		271
272	#### Mutation Buttons	272	### Mutation Buttons
273		273
274	You can wrap your button component with `createMutationButton` to make it support mutations	274	You can wrap your button component with `createMutationButton` to make it support mutations
275		275
...	@@ -312,7 +312,7 @@ It can now be used for easy mutations:	...	@@ -312,7 +312,7 @@ It can now be used for easy mutations:
312		312
313		313
314		314
315	### Batched Mutations	315	## Batched Mutations
316		316
317	Each call to the mutation applies new optimistic state on top of the previous,	317	Each call to the mutation applies new optimistic state on top of the previous,
318	and after a debounce / throttle, the new optimistic state is committed to the	318	and after a debounce / throttle, the new optimistic state is committed to the