fix #491 - useSubmission with "with" actions

Author: ryansolid

.changeset/serious-squids-agree.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/router": patch
+---
+
+fix #491 - useSubmission with "with" actions

src/data/action.ts

@@ -5,26 +5,26 @@ import type { RouterContext, Submission, SubmissionStub, Navigator, NarrowRespon
 import { mockBase } from "../utils.js";
 import { cacheKeyOp, hashKey, revalidate, cache } from "./cache.js";
 
-export type Action<T extends Array<any>, U> = (T extends [FormData] | []
+export type Action<T extends Array<any>, U, V = T> = (T extends [FormData] | []
   ? JSX.SerializableAttributeValue
   : unknown) &
   ((...vars: T) => Promise<NarrowResponse<U>>) & {
     url: string;
     with<A extends any[], B extends any[]>(
       this: (this: any, ...args: [...A, ...B]) => Promise<NarrowResponse<U>>,
       ...args: A
-    ): Action<B, U>;
+    ): Action<B, U, V>;
   };
 
 export const actions = /* #__PURE__ */ new Map<string, Action<any, any>>();
 
-export function useSubmissions<T extends Array<any>, U>(
-  fn: Action<T, U>,
-  filter?: (arg: T) => boolean
+export function useSubmissions<T extends Array<any>, U, V>(
+  fn: Action<T, U, V>,
+  filter?: (input: V) => boolean
 ): Submission<T, NarrowResponse<U>>[] & { pending: boolean } {
   const router = useRouter();
   const subs = createMemo(() =>
-    router.submissions[0]().filter(s => s.url === fn.toString() && (!filter || filter(s.input)))
+    router.submissions[0]().filter(s => s.url === (fn as any).base && (!filter || filter(s.input)))
   );
   return new Proxy<Submission<any, any>[] & { pending: boolean }>([] as any, {
     get(_, property) {
@@ -38,9 +38,9 @@ export function useSubmissions<T extends Array<any>, U>(
   });
 }
 
-export function useSubmission<T extends Array<any>, U>(
-  fn: Action<T, U>,
-  filter?: (arg: T) => boolean
+export function useSubmission<T extends Array<any>, U, V>(
+  fn: Action<T, U, V>,
+  filter?: (input: V) => boolean
 ): Submission<T, NarrowResponse<U>> | SubmissionStub {
   const submissions = useSubmissions(fn, filter);
   return new Proxy(
@@ -54,15 +54,15 @@ export function useSubmission<T extends Array<any>, U>(
   ) as Submission<T, NarrowResponse<U>>;
 }
 
-export function useAction<T extends Array<any>, U>(action: Action<T, U>) {
+export function useAction<T extends Array<any>, U, V>(action: Action<T, U, V>) {
   const r = useRouter();
-  return (...args: Parameters<Action<T, U>>) => action.apply({ r }, args);
+  return (...args: Parameters<Action<T, U, V>>) => action.apply({ r }, args);
 }
 
 export function action<T extends Array<any>, U = void>(
   fn: (...args: T) => Promise<U>,
   name?: string
-): Action<T, U> {
+): Action<T, U, T> {
   function mutate(this: { r: RouterContext; f?: HTMLFormElement }, ...variables: T) {
     const router = this.r;
     const form = this.f;
@@ -113,10 +113,11 @@ export function action<T extends Array<any>, U = void>(
     (fn as any).url ||
     (name && `https://action/${name}`) ||
     (!isServer ? `https://action/${hashString(fn.toString())}` : "");
+  mutate.base = url;
   return toAction(mutate, url);
 }
 
-function toAction<T extends Array<any>, U>(fn: Function, url: string): Action<T, U> {
+function toAction<T extends Array<any>, U, V = T>(fn: Function, url: string): Action<T, U, V> {
   fn.toString = () => {
     if (!url) throw new Error("Client Actions need explicit names if server rendered");
     return url;
@@ -128,19 +129,20 @@ function toAction<T extends Array<any>, U>(fn: Function, url: string): Action<T,
     const newFn = function (this: RouterContext, ...passedArgs: B): U {
       return fn.call(this, ...args, ...passedArgs);
     };
+    newFn.base = (fn as any).base;
     const uri = new URL(url, mockBase);
     uri.searchParams.set("args", hashKey(args));
-    return toAction<B, U>(
+    return toAction<B, U, V>(
       newFn as any,
       (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search
     );
   };
   (fn as any).url = url;
   if (!isServer) {
-    actions.set(url, fn as Action<T, U>);
+    actions.set(url, fn as Action<T, U, V>);
     getOwner() && onCleanup(() => actions.delete(url));
   }
-  return fn as Action<T, U>;
+  return fn as Action<T, U, V>;
 }
 
 const hashString = (s: string) =>