@solidjs/router 0.10.0-beta.6 → 0.10.0-beta.7

package/dist/data/action.d.ts

@@ -1,10 +1,13 @@
 import { JSX } from "solid-js";
 import { Submission } from "../types";
-export type Action<T, U> = ((vars: T) => Promise<U>) & JSX.SerializableAttributeValue;
-export declare const actions: Map<string, Function>;
-export declare function useSubmissions<T, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>[] & {
+export type Action<T extends Array<any>, U> = ((...vars: T) => Promise<U>) & JSX.SerializableAttributeValue & {
+    url: string;
+    with<A extends any[], B extends any[]>(this: (this: any, ...args: [...A, ...B]) => U, ...args: A): Action<B, U>;
+};
+export declare const actions: Map<string, Action<any, any>>;
+export declare function useSubmissions<T extends Array<any>, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>[] & {
     pending: boolean;
 };
-export declare function useSubmission<T, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>;
-export declare function useAction<T, U>(action: Action<T, U>): Action<T, U>;
-export declare function action<T, U = void>(fn: (args: T) => Promise<U>, name?: string): Action<T, U>;
+export declare function useSubmission<T extends Array<any>, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>;
+export declare function useAction<T extends Array<any>, U>(action: Action<T, U>): (...args: Parameters<Action<T, U>>) => Promise<U>;
+export declare function action<T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, name?: string): Action<T, U>;

package/dist/data/action.js

@@ -1,8 +1,8 @@
-import { $TRACK, createMemo, createSignal } from "solid-js";
+import { $TRACK, createMemo, createSignal, onCleanup, getOwner } from "solid-js";
 import { isServer } from "solid-js/web";
 import { useRouter } from "../routing";
 import { redirectStatusCodes } from "../utils";
-import { revalidate } from "./cache";
+import { hashKey, revalidate } from "./cache";
 export const actions = /* #__PURE__ */ new Map();
 export function useSubmissions(fn, filter) {
     const router = useRouter();
@@ -27,11 +27,11 @@ export function useSubmission(fn, filter) {
 }
 export function useAction(action) {
     const router = useRouter();
-    return action.bind(router);
+    return (...args) => action.apply(router, args);
 }
 export function action(fn, name) {
-    function mutate(variables) {
-        const p = fn(variables);
+    function mutate(...variables) {
+        const p = fn(...variables);
         const [result, setResult] = createSignal();
         let submission;
         const router = this;
@@ -56,7 +56,7 @@ export function action(fn, name) {
                 },
                 retry() {
                     setResult(undefined);
-                    const p = fn(variables);
+                    const p = fn(...variables);
                     p.then(handler, handler);
                     return p;
                 }
@@ -66,14 +66,28 @@ export function action(fn, name) {
         return p;
     }
     const url = fn.url || (name && `action:${name}`) || (!isServer ? `action:${fn.name}` : "");
-    mutate.toString = () => {
+    return toAction(mutate, url);
+}
+function toAction(fn, url) {
+    fn.toString = () => {
         if (!url)
             throw new Error("Client Actions need explicit names if server rendered");
         return url;
     };
-    if (!isServer)
-        actions.set(url, mutate);
-    return mutate;
+    fn.with = function (...args) {
+        const newFn = function (...passedArgs) {
+            return fn.call(this, ...args, ...passedArgs);
+        };
+        const uri = new URL(url, "http://sar");
+        uri.searchParams.set("args", hashKey(args));
+        return toAction(newFn, uri.toString());
+    };
+    fn.url = url;
+    if (!isServer) {
+        actions.set(url, fn);
+        getOwner() && onCleanup(() => actions.delete(url));
+    }
+    return fn;
 }
 async function handleResponse(response, navigate) {
     let data;

package/dist/data/cache.d.ts

@@ -5,3 +5,4 @@ export type CachedFunction<T extends (...args: any) => U | Response, U> = T & {
     key: string;
 };
 export declare function cache<T extends (...args: any) => U | Response, U>(fn: T, name: string, options?: ReconcileOptions): CachedFunction<T, U>;
+export declare function hashKey<T extends Array<any>>(args: T): string;

package/dist/data/cache.js

@@ -139,7 +139,7 @@ function matchKey(key, keys) {
 }
 // Modified from the amazing Tanstack Query library (MIT)
 // https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L168
-function hashKey(args) {
+export function hashKey(args) {
     return JSON.stringify(args, (_, val) => isPlainObject(val)
         ? Object.keys(val)
             .sort()

package/dist/data/events.js

@@ -81,7 +81,9 @@ export function setupNativeEvents(router) {
         }
     }
     function handleFormSubmit(evt) {
-        let actionRef = (evt.submitter && evt.submitter.getAttribute("formaction")) || evt.target.action;
+        let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction")
+            ? evt.submitter.formAction
+            : evt.target.action;
         if (!actionRef)
             return;
         if (!actionRef.startsWith("action:")) {

package/dist/index.js

@@ -389,7 +389,7 @@ function createRouterContext(integration, getBranches, options = {}) {
   const [state, setState] = createSignal(source().state);
   const location = createLocation(reference, state);
   const referrers = [];
-  const submissions = createSignal(initFromFlash(location.query));
+  const submissions = createSignal(isServer ? initFromFlash() : []);
   const baseRoute = {
     pattern: basePath,
     params: {},
@@ -544,15 +544,9 @@ function createRouterContext(integration, getBranches, options = {}) {
     }
     intent = prevIntent;
   }
-  function initFromFlash(params) {
-    let param = params.form ? JSON.parse(params.form) : null;
-    if (!param || !param.result) return [];
-    const input = new Map(param.entries);
-    return [{
-      url: param.url,
-      result: param.error ? new Error(param.result) : param.result,
-      input: input
-    }];
+  function initFromFlash() {
+    const e = getRequestEvent();
+    return e && e.initialSubmission ? [e.initialSubmission] : [];
   }
 }
 function createRouteContext(router, parent, outlet, match, params) {
@@ -916,11 +910,11 @@ function useSubmission(fn, filter) {
 }
 function useAction(action) {
   const router = useRouter();
-  return action.bind(router);
+  return (...args) => action.apply(router, args);
 }
 function action(fn, name) {
-  function mutate(variables) {
-    const p = fn(variables);
+  function mutate(...variables) {
+    const p = fn(...variables);
     const [result, setResult] = createSignal();
     let submission;
     const router = this;
@@ -945,7 +939,7 @@ function action(fn, name) {
       },
       retry() {
         setResult(undefined);
-        const p = fn(variables);
+        const p = fn(...variables);
         p.then(handler, handler);
         return p;
       }
@@ -954,12 +948,27 @@ function action(fn, name) {
     return p;
   }
   const url = fn.url || name && `action:${name}` || (!isServer ? `action:${fn.name}` : "");
-  mutate.toString = () => {
+  return toAction(mutate, url);
+}
+function toAction(fn, url) {
+  fn.toString = () => {
     if (!url) throw new Error("Client Actions need explicit names if server rendered");
     return url;
   };
-  if (!isServer) actions.set(url, mutate);
-  return mutate;
+  fn.with = function (...args) {
+    const newFn = function (...passedArgs) {
+      return fn.call(this, ...args, ...passedArgs);
+    };
+    const uri = new URL(url, "http://sar");
+    uri.searchParams.set("args", hashKey(args));
+    return toAction(newFn, uri.toString());
+  };
+  fn.url = url;
+  if (!isServer) {
+    actions.set(url, fn);
+    getOwner() && onCleanup(() => actions.delete(url));
+  }
+  return fn;
 }
 async function handleResponse(response, navigate) {
   let data;
@@ -1043,7 +1052,7 @@ function setupNativeEvents(router) {
     }
   }
   function handleFormSubmit(evt) {
-    let actionRef = evt.submitter && evt.submitter.getAttribute("formaction") || evt.target.action;
+    let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction") ? evt.submitter.formAction : evt.target.action;
     if (!actionRef) return;
     if (!actionRef.startsWith("action:")) {
       const url = new URL(actionRef);

package/dist/routing.js

@@ -202,7 +202,7 @@ export function createRouterContext(integration, getBranches, options = {}) {
     const [state, setState] = createSignal(source().state);
     const location = createLocation(reference, state);
     const referrers = [];
-    const submissions = createSignal(initFromFlash(location.query));
+    const submissions = createSignal(isServer ? initFromFlash() : []);
     const baseRoute = {
         pattern: basePath,
         params: {},
@@ -342,18 +342,9 @@ export function createRouterContext(integration, getBranches, options = {}) {
         }
         intent = prevIntent;
     }
-    function initFromFlash(params) {
-        let param = params.form ? JSON.parse(params.form) : null;
-        if (!param || !param.result)
-            return [];
-        const input = new Map(param.entries);
-        return [
-            {
-                url: param.url,
-                result: param.error ? new Error(param.result) : param.result,
-                input: input
-            }
-        ];
+    function initFromFlash() {
+        const e = getRequestEvent();
+        return e && e.initialSubmission ? [e.initialSubmission] : [];
     }
 }
 export function createRouteContext(router, parent, outlet, match, params) {

package/dist/types.d.ts

@@ -3,6 +3,7 @@ declare module "solid-js/web" {
     interface RequestEvent {
         response?: Response;
         routerCache?: Map<any, any>;
+        initialSubmission?: Submission<any, any>;
     }
 }
 export type Params = Record<string, string>;

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.10.0-beta.6",
+  "version": "0.10.0-beta.7",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",