@solidjs/router 0.14.9 → 0.15.0

package/README.md

@@ -427,30 +427,30 @@ The return value of the `preload` function is passed to the page component when
 
 Keep in mind these are completely optional. To use but showcase the power of our preload mechanism.
 
-### `cache`
+### `query`
 
-To prevent duplicate fetching and to trigger handle refetching we provide a cache api. That takes a function and returns the same function.
+To prevent duplicate fetching and to trigger handle refetching we provide a query api. That takes a function and returns the same function.
 
 ```jsx
-const getUser = cache(async (id) => {
+const getUser = query(async (id) => {
   return (await fetch(`/api/users${id}`)).json()
-}, "users") // used as cache key + serialized arguments
+}, "users") // used as the query key + serialized arguments
 ```
-It is expected that the arguments to the cache function are serializable.
+It is expected that the arguments to the query function are serializable.
 
-This cache accomplishes the following:
+This query accomplishes the following:
 
-1. It does just deduping on the server for the lifetime of the request.
-2. It does preload cache in the browser which lasts 5 seconds. When a route is preloaded on hover or when preload is called when entering a route it will make sure to dedupe calls.
+1. It does deduping on the server for the lifetime of the request.
+2. It fills a preload cache in the browser which lasts 5 seconds. When a route is preloaded on hover or when preload is called when entering a route it will make sure to dedupe calls.
 3. We have a reactive refetch mechanism based on key. So we can tell routes that aren't new to retrigger on action revalidation.
-4. It will serve as a back/forward cache for browser navigation up to 5 mins. Any user based navigation or link click bypasses it. Revalidation or new fetch updates the cache.
+4. It will serve as a back/forward cache for browser navigation up to 5 mins. Any user based navigation or link click bypasses this cache. Revalidation or new fetch updates the cache.
 
 Using it with preload function might look like:
 
 ```js
 import { lazy } from "solid-js";
 import { Route } from "@solidjs/router";
-import { getUser } from ... // the cache function
+import { getUser } from ... // the query function
 
 const User = lazy(() => import("./pages/users/[id].js"));
 
@@ -467,7 +467,7 @@ Inside your page component you:
 
 ```jsx
 // pages/users/[id].js
-import { getUser } from ... // the cache function
+import { getUser } from ... // the query function
 
 export default function User(props) {
   const user = createAsync(() => getUser(props.params.id));
@@ -483,9 +483,9 @@ getUser.key // returns "users"
 getUser.keyFor(id) // returns "users[5]"
 ```
 
-You can revalidate the cache using the `revalidate` method or you can set `revalidate` keys on your response from your actions. If you pass the whole key it will invalidate all the entries for the cache (ie "users" in the example above). You can also invalidate a single entry by using `keyFor`.
+You can revalidate the query using the `revalidate` method or you can set `revalidate` keys on your response from your actions. If you pass the whole key it will invalidate all the entries for the query (ie "users" in the example above). You can also invalidate a single entry by using `keyFor`.
 
-`cache` can be defined anywhere and then used inside your components with:
+`query` can be defined anywhere and then used inside your components with:
 
 ### `createAsync`
 
@@ -502,7 +502,7 @@ const user = createAsync((currentValue) => getUser(params.id))
 return <h1>{user.latest.name}</h1>;
 ```
 
-Using `cache` in `createResource` directly won't work properly as the fetcher is not reactive and it won't invalidate properly.
+Using `query` in `createResource` directly won't work properly as the fetcher is not reactive and it won't invalidate properly.
 
 ### `createAsyncStore`
 
@@ -558,7 +558,9 @@ const deleteUser = action(api.deleteTodo)
 </form>
 ```
 
-#### Notes of `<form>` implementation and SSR
+Actions also a second argument which can be the name or an option object with `name` and `onComplete`. `name` is used to identify SSR actions that aren't server functions (see note below). `onComplete` allows you to configure behavior when `action`s complete. Keep in mind `onComplete` does not work when JavaScript is disabled.
+
+#### Notes on `<form>` implementation and SSR
 This requires stable references as you can only serialize a string as an attribute, and across SSR they'd need to match. The solution is providing a unique name.
 
 ```jsx
@@ -597,13 +599,13 @@ const submission = useSubmission(action, (input) => filter(input));
 
 ### Response Helpers
 
-These are used to communicate router navigations from cache/actions, and can include invalidation hints. Generally these are thrown to not interfere the with the types and make it clear that function ends execution at that point.
+These are used to communicate router navigations from query/actions, and can include invalidation hints. Generally these are thrown to not interfere the with the types and make it clear that function ends execution at that point.
 
 #### `redirect(path, options)`
 
 Redirects to the next route
 ```js
-const getUser = cache(() => {
+const getUser = query(() => {
   const user = await api.getCurrentUser()
   if (!user) throw redirect("/login");
   return user;
@@ -614,7 +616,7 @@ const getUser = cache(() => {
 
 Reloads the data on the current page
 ```js
-const getTodo = cache(async (id: number) => {
+const getTodo = query(async (id: number) => {
   const todo = await fetchTodo(id);
   return todo;
 }, "todo")
@@ -937,7 +939,7 @@ Related without Outlet component it has to be passed in manually. At which point
 
 ### `data` functions & `useRouteData`
 
-These have been replaced by a preload mechanism. This  allows link hover preloads (as the preload function can be run as much as wanted without worry about reactivity). It support deduping/cache APIs which give more control over how things are cached. It also addresses TS issues with getting the right types in the Component without `typeof` checks.
+These have been replaced by a preload mechanism. This  allows link hover preloads (as the preload function can be run as much as wanted without worry about reactivity). It support deduping/query APIs which give more control over how things are cached. It also addresses TS issues with getting the right types in the Component without `typeof` checks.
 
 That being said you can reproduce the old pattern largely by turning off preloads at the router level and then injecting your own Context:
 

package/dist/data/action.d.ts

@@ -1,13 +1,17 @@
 import { JSX } from "solid-js";
 import type { Submission, SubmissionStub, NarrowResponse } from "../types.js";
-export type Action<T extends Array<any>, U> = (T extends [FormData] | [] ? JSX.SerializableAttributeValue : unknown) & ((...vars: T) => Promise<NarrowResponse<U>>) & {
+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>;
+    with<A extends any[], B extends any[]>(this: (this: any, ...args: [...A, ...B]) => Promise<NarrowResponse<U>>, ...args: A): Action<B, U, V>;
 };
-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, NarrowResponse<U>>[] & {
+export declare const actions: Map<string, Action<any, any, any>>;
+export declare function useSubmissions<T extends Array<any>, U, V>(fn: Action<T, U, V>, filter?: (input: V) => boolean): Submission<T, NarrowResponse<U>>[] & {
     pending: boolean;
 };
-export declare function useSubmission<T extends Array<any>, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, NarrowResponse<U>> | SubmissionStub;
-export declare function useAction<T extends Array<any>, U>(action: Action<T, U>): (...args: Parameters<Action<T, U>>) => Promise<NarrowResponse<U>>;
+export declare function useSubmission<T extends Array<any>, U, V>(fn: Action<T, U, V>, filter?: (input: V) => boolean): Submission<T, NarrowResponse<U>> | SubmissionStub;
+export declare function useAction<T extends Array<any>, U, V>(action: Action<T, U, V>): (...args: Parameters<Action<T, U, V>>) => Promise<NarrowResponse<U>>;
 export declare function action<T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, name?: string): Action<T, U>;
+export declare function action<T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, options?: {
+    name?: string;
+    onComplete?: (s: Submission<T, U>) => boolean;
+}): Action<T, U>;

package/dist/data/action.js

@@ -2,11 +2,11 @@ import { $TRACK, createMemo, createSignal, onCleanup, getOwner } from "solid-js"
 import { isServer } from "solid-js/web";
 import { useRouter } from "../routing.js";
 import { mockBase } from "../utils.js";
-import { cacheKeyOp, hashKey, revalidate, cache } from "./cache.js";
+import { cacheKeyOp, hashKey, revalidate, query } from "./query.js";
 export const actions = /* #__PURE__ */ new Map();
 export function useSubmissions(fn, filter) {
     const router = useRouter();
-    const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.toString() && (!filter || filter(s.input))));
+    const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.base && (!filter || filter(s.input))));
     return new Proxy([], {
         get(_, property) {
             if (property === $TRACK)
@@ -24,8 +24,8 @@ export function useSubmission(fn, filter) {
     const submissions = useSubmissions(fn, filter);
     return new Proxy({}, {
         get(_, property) {
-            if (submissions.length === 0 && property === "clear" || property === "retry")
-                return (() => { });
+            if ((submissions.length === 0 && property === "clear") || property === "retry")
+                return () => { };
             return submissions[submissions.length - 1]?.[property];
         }
     });
@@ -34,7 +34,7 @@ export function useAction(action) {
     const r = useRouter();
     return (...args) => action.apply({ r }, args);
 }
-export function action(fn, name) {
+export function action(fn, options = {}) {
     function mutate(...variables) {
         const router = this.r;
         const form = this.f;
@@ -46,6 +46,18 @@ export function action(fn, name) {
         function handler(error) {
             return async (res) => {
                 const result = await handleResponse(res, error, router.navigatorFactory());
+                let retry = null;
+                !o.onComplete?.({
+                    ...submission,
+                    result: result?.data,
+                    error: result?.error,
+                    pending: false,
+                    retry() {
+                        return retry = submission.retry();
+                    }
+                });
+                if (retry)
+                    return retry;
                 if (!result)
                     return submission.clear();
                 setResult(result);
@@ -69,7 +81,7 @@ export function action(fn, name) {
                     return !result();
                 },
                 clear() {
-                    router.submissions[1](v => v.filter(i => i.input !== variables));
+                    router.submissions[1](v => v.filter(i => i !== submission));
                 },
                 retry() {
                     setResult(undefined);
@@ -80,9 +92,11 @@ export function action(fn, name) {
         ]);
         return p.then(handler(), handler(true));
     }
+    const o = typeof options === "string" ? { name: options } : options;
     const url = fn.url ||
-        (name && `https://action/${name}`) ||
+        (o.name && `https://action/${o.name}`) ||
         (!isServer ? `https://action/${hashString(fn.toString())}` : "");
+    mutate.base = url;
     return toAction(mutate, url);
 }
 function toAction(fn, url) {
@@ -95,6 +109,7 @@ function toAction(fn, url) {
         const newFn = function (...passedArgs) {
             return fn.call(this, ...args, ...passedArgs);
         };
+        newFn.base = fn.base;
         const uri = new URL(url, mockBase);
         uri.searchParams.set("args", hashKey(args));
         return toAction(newFn, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search);
@@ -140,7 +155,7 @@ async function handleResponse(response, error, navigate) {
     // invalidate
     cacheKeyOp(keys, entry => (entry[0] = 0));
     // set cache
-    flightKeys && flightKeys.forEach(k => cache.set(k, custom[k]));
+    flightKeys && flightKeys.forEach(k => query.set(k, custom[k]));
     // trigger revalidation
     await revalidate(keys, false);
     return data != null ? { data } : undefined;

package/dist/data/index.d.ts

@@ -1,4 +1,4 @@
 export { createAsync, createAsyncStore, type AccessorWithLatest } from "./createAsync.js";
 export { action, useSubmission, useSubmissions, useAction, type Action } from "./action.js";
-export { cache, revalidate, type CachedFunction } from "./cache.js";
+export { query, revalidate, cache, type CachedFunction } from "./query.js";
 export { redirect, reload, json } from "./response.js";

package/dist/data/index.js

@@ -1,4 +1,4 @@
 export { createAsync, createAsyncStore } from "./createAsync.js";
 export { action, useSubmission, useSubmissions, useAction } from "./action.js";
-export { cache, revalidate } from "./cache.js";
+export { query, revalidate, cache } from "./query.js";
 export { redirect, reload, json } from "./response.js";

package/dist/data/query.d.ts

@@ -0,0 +1,20 @@
+import type { CacheEntry, NarrowResponse } from "../types.js";
+export declare function revalidate(key?: string | string[] | void, force?: boolean): Promise<void>;
+export declare function cacheKeyOp(key: string | string[] | void, fn: (cacheEntry: CacheEntry) => void): void;
+export type CachedFunction<T extends (...args: any) => any> = T extends (...args: infer A) => infer R ? ([] extends {
+    [K in keyof A]-?: A[K];
+} ? (...args: never[]) => R extends Promise<infer P> ? Promise<NarrowResponse<P>> : NarrowResponse<R> : (...args: A) => R extends Promise<infer P> ? Promise<NarrowResponse<P>> : NarrowResponse<R>) & {
+    keyFor: (...args: A) => string;
+    key: string;
+} : never;
+export declare function query<T extends (...args: any) => any>(fn: T, name: string): CachedFunction<T>;
+export declare namespace query {
+    export var get: (key: string) => any;
+    export var set: <T>(key: string, value: T extends Promise<any> ? never : T) => void;
+    var _a: (key: string) => boolean;
+    export var clear: () => void;
+    export { _a as delete };
+}
+/** @deprecated use query instead */
+export declare const cache: typeof query;
+export declare function hashKey<T extends Array<any>>(args: T): string;

package/dist/data/query.js

@@ -0,0 +1,218 @@
+import { createSignal, getListener, getOwner, onCleanup, sharedConfig, startTransition } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+import { useNavigate, getIntent, getInPreloadFn } from "../routing.js";
+const LocationHeader = "Location";
+const PRELOAD_TIMEOUT = 5000;
+const CACHE_TIMEOUT = 180000;
+let cacheMap = new Map();
+// cleanup forward/back cache
+if (!isServer) {
+    setInterval(() => {
+        const now = Date.now();
+        for (let [k, v] of cacheMap.entries()) {
+            if (!v[4].count && now - v[0] > CACHE_TIMEOUT) {
+                cacheMap.delete(k);
+            }
+        }
+    }, 300000);
+}
+function getCache() {
+    if (!isServer)
+        return cacheMap;
+    const req = getRequestEvent();
+    if (!req)
+        throw new Error("Cannot find cache context");
+    return (req.router || (req.router = {})).cache || (req.router.cache = new Map());
+}
+export function revalidate(key, force = true) {
+    return startTransition(() => {
+        const now = Date.now();
+        cacheKeyOp(key, entry => {
+            force && (entry[0] = 0); //force cache miss
+            entry[4][1](now); // retrigger live signals
+        });
+    });
+}
+export function cacheKeyOp(key, fn) {
+    key && !Array.isArray(key) && (key = [key]);
+    for (let k of cacheMap.keys()) {
+        if (key === undefined || matchKey(k, key))
+            fn(cacheMap.get(k));
+    }
+}
+export function query(fn, name) {
+    // prioritize GET for server functions
+    if (fn.GET)
+        fn = fn.GET;
+    const cachedFn = ((...args) => {
+        const cache = getCache();
+        const intent = getIntent();
+        const inPreloadFn = getInPreloadFn();
+        const owner = getOwner();
+        const navigate = owner ? useNavigate() : undefined;
+        const now = Date.now();
+        const key = name + hashKey(args);
+        let cached = cache.get(key);
+        let tracking;
+        if (isServer) {
+            const e = getRequestEvent();
+            if (e) {
+                const dataOnly = (e.router || (e.router = {})).dataOnly;
+                if (dataOnly) {
+                    const data = e && (e.router.data || (e.router.data = {}));
+                    if (data && key in data)
+                        return data[key];
+                    if (Array.isArray(dataOnly) && !matchKey(key, dataOnly)) {
+                        data[key] = undefined;
+                        return Promise.resolve();
+                    }
+                }
+            }
+        }
+        if (getListener() && !isServer) {
+            tracking = true;
+            onCleanup(() => cached[4].count--);
+        }
+        if (cached &&
+            cached[0] &&
+            (isServer ||
+                intent === "native" ||
+                cached[4].count ||
+                Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
+            if (tracking) {
+                cached[4].count++;
+                cached[4][0](); // track
+            }
+            if (cached[3] === "preload" && intent !== "preload") {
+                cached[0] = now;
+            }
+            let res = cached[1];
+            if (intent !== "preload") {
+                res =
+                    "then" in cached[1]
+                        ? cached[1].then(handleResponse(false), handleResponse(true))
+                        : handleResponse(false)(cached[1]);
+                !isServer && intent === "navigate" && startTransition(() => cached[4][1](cached[0])); // update version
+            }
+            inPreloadFn && "then" in res && res.catch(() => { });
+            return res;
+        }
+        let res = !isServer && sharedConfig.context && sharedConfig.has(key)
+            ? sharedConfig.load(key) // hydrating
+            : fn(...args);
+        if (cached) {
+            cached[0] = now;
+            cached[1] = res;
+            cached[3] = intent;
+            !isServer && intent === "navigate" && startTransition(() => cached[4][1](cached[0])); // update version
+        }
+        else {
+            cache.set(key, (cached = [now, res, , intent, createSignal(now)]));
+            cached[4].count = 0;
+        }
+        if (tracking) {
+            cached[4].count++;
+            cached[4][0](); // track
+        }
+        if (isServer) {
+            const e = getRequestEvent();
+            if (e && e.router.dataOnly)
+                return (e.router.data[key] = res);
+        }
+        if (intent !== "preload") {
+            res =
+                "then" in res
+                    ? res.then(handleResponse(false), handleResponse(true))
+                    : handleResponse(false)(res);
+        }
+        inPreloadFn && "then" in res && res.catch(() => { });
+        // serialize on server
+        if (isServer &&
+            sharedConfig.context &&
+            sharedConfig.context.async &&
+            !sharedConfig.context.noHydrate) {
+            const e = getRequestEvent();
+            (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
+        }
+        return res;
+        function handleResponse(error) {
+            return async (v) => {
+                if (v instanceof Response) {
+                    const url = v.headers.get(LocationHeader);
+                    if (url !== null) {
+                        // client + server relative redirect
+                        if (navigate && url.startsWith("/"))
+                            startTransition(() => {
+                                navigate(url, { replace: true });
+                            });
+                        else if (!isServer)
+                            window.location.href = url;
+                        else if (isServer) {
+                            const e = getRequestEvent();
+                            if (e)
+                                e.response = { status: 302, headers: new Headers({ Location: url }) };
+                        }
+                        return;
+                    }
+                    if (v.customBody)
+                        v = await v.customBody();
+                }
+                if (error)
+                    throw v;
+                cached[2] = v;
+                return v;
+            };
+        }
+    });
+    cachedFn.keyFor = (...args) => name + hashKey(args);
+    cachedFn.key = name;
+    return cachedFn;
+}
+query.get = (key) => {
+    const cached = getCache().get(key);
+    return cached[2];
+};
+query.set = (key, value) => {
+    const cache = getCache();
+    const now = Date.now();
+    let cached = cache.get(key);
+    if (cached) {
+        cached[0] = now;
+        cached[1] = Promise.resolve(value);
+        cached[2] = value;
+        cached[3] = "preload";
+    }
+    else {
+        cache.set(key, (cached = [now, Promise.resolve(value), value, "preload", createSignal(now)]));
+        cached[4].count = 0;
+    }
+};
+query.delete = (key) => getCache().delete(key);
+query.clear = () => getCache().clear();
+/** @deprecated use query instead */
+export const cache = query;
+function matchKey(key, keys) {
+    for (let k of keys) {
+        if (k && key.startsWith(k))
+            return true;
+    }
+    return false;
+}
+// Modified from the amazing Tanstack Query library (MIT)
+// https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L168
+export function hashKey(args) {
+    return JSON.stringify(args, (_, val) => isPlainObject(val)
+        ? Object.keys(val)
+            .sort()
+            .reduce((result, key) => {
+            result[key] = val[key];
+            return result;
+        }, {})
+        : val);
+}
+function isPlainObject(obj) {
+    let proto;
+    return (obj != null &&
+        typeof obj === "object" &&
+        (!(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype));
+}

package/dist/index.js

@@ -111,7 +111,9 @@ function joinPaths(from, to) {
 function extractSearchParams(url) {
   const params = {};
   url.searchParams.forEach((value, key) => {
-    params[key] = value;
+    if (key in params) {
+      if (Array.isArray(params[key])) params[key].push(value);else params[key] = [params[key], value];
+    } else params[key] = value;
   });
   return params;
 }
@@ -197,10 +199,18 @@ function createMemoObject(fn) {
 function mergeSearchString(search, params) {
   const merged = new URLSearchParams(search);
   Object.entries(params).forEach(([key, value]) => {
-    if (value == null || value === "") {
+    if (value == null || value === "" || value instanceof Array && !value.length) {
       merged.delete(key);
     } else {
-      merged.set(key, String(value));
+      if (value instanceof Array) {
+        // Delete all instances of the key before appending
+        merged.delete(key);
+        value.forEach(v => {
+          merged.append(key, String(v));
+        });
+      } else {
+        merged.set(key, String(value));
+      }
     }
   });
   const s = merged.toString();
@@ -884,7 +894,7 @@ if (!isServer) {
   setInterval(() => {
     const now = Date.now();
     for (let [k, v] of cacheMap.entries()) {
-      if (!v[3].count && now - v[0] > CACHE_TIMEOUT) {
+      if (!v[4].count && now - v[0] > CACHE_TIMEOUT) {
         cacheMap.delete(k);
       }
     }
@@ -901,7 +911,7 @@ function revalidate(key, force = true) {
     const now = Date.now();
     cacheKeyOp(key, entry => {
       force && (entry[0] = 0); //force cache miss
-      entry[3][1](now); // retrigger live signals
+      entry[4][1](now); // retrigger live signals
     });
   });
 }
@@ -911,7 +921,7 @@ function cacheKeyOp(key, fn) {
     if (key === undefined || matchKey(k, key)) fn(cacheMap.get(k));
   }
 }
-function cache(fn, name) {
+function query(fn, name) {
   // prioritize GET for server functions
   if (fn.GET) fn = fn.GET;
   const cachedFn = (...args) => {
@@ -940,20 +950,20 @@ function cache(fn, name) {
     }
     if (getListener() && !isServer) {
       tracking = true;
-      onCleanup(() => cached[3].count--);
+      onCleanup(() => cached[4].count--);
     }
-    if (cached && cached[0] && (isServer || intent === "native" || cached[3].count || Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
+    if (cached && cached[0] && (isServer || intent === "native" || cached[4].count || Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
       if (tracking) {
-        cached[3].count++;
-        cached[3][0](); // track
+        cached[4].count++;
+        cached[4][0](); // track
       }
-      if (cached[2] === "preload" && intent !== "preload") {
+      if (cached[3] === "preload" && intent !== "preload") {
         cached[0] = now;
       }
       let res = cached[1];
       if (intent !== "preload") {
         res = "then" in cached[1] ? cached[1].then(handleResponse(false), handleResponse(true)) : handleResponse(false)(cached[1]);
-        !isServer && intent === "navigate" && startTransition(() => cached[3][1](cached[0])); // update version
+        !isServer && intent === "navigate" && startTransition(() => cached[4][1](cached[0])); // update version
       }
       inPreloadFn && "then" in res && res.catch(() => {});
       return res;
@@ -963,15 +973,15 @@ function cache(fn, name) {
     if (cached) {
       cached[0] = now;
       cached[1] = res;
-      cached[2] = intent;
-      !isServer && intent === "navigate" && startTransition(() => cached[3][1](cached[0])); // update version
+      cached[3] = intent;
+      !isServer && intent === "navigate" && startTransition(() => cached[4][1](cached[0])); // update version
     } else {
-      cache.set(key, cached = [now, res, intent, createSignal(now)]);
-      cached[3].count = 0;
+      cache.set(key, cached = [now, res,, intent, createSignal(now)]);
+      cached[4].count = 0;
     }
     if (tracking) {
-      cached[3].count++;
-      cached[3][0](); // track
+      cached[4].count++;
+      cached[4][0](); // track
     }
     if (isServer) {
       const e = getRequestEvent();
@@ -1011,6 +1021,7 @@ function cache(fn, name) {
           if (v.customBody) v = await v.customBody();
         }
         if (error) throw v;
+        cached[2] = v;
         return v;
       };
     }
@@ -1019,20 +1030,29 @@ function cache(fn, name) {
   cachedFn.key = name;
   return cachedFn;
 }
-cache.set = (key, value) => {
+query.get = key => {
+  const cached = getCache().get(key);
+  return cached[2];
+};
+query.set = (key, value) => {
   const cache = getCache();
   const now = Date.now();
   let cached = cache.get(key);
   if (cached) {
     cached[0] = now;
-    cached[1] = value;
-    cached[2] = "preload";
+    cached[1] = Promise.resolve(value);
+    cached[2] = value;
+    cached[3] = "preload";
   } else {
-    cache.set(key, cached = [now, value,, createSignal(now)]);
-    cached[3].count = 0;
+    cache.set(key, cached = [now, Promise.resolve(value), value, "preload", createSignal(now)]);
+    cached[4].count = 0;
   }
 };
-cache.clear = () => getCache().clear();
+query.delete = key => getCache().delete(key);
+query.clear = () => getCache().clear();
+
+/** @deprecated use query instead */
+const cache = query;
 function matchKey(key, keys) {
   for (let k of keys) {
     if (k && key.startsWith(k)) return true;
@@ -1056,7 +1076,7 @@ function isPlainObject(obj) {
 const actions = /* #__PURE__ */new Map();
 function useSubmissions(fn, filter) {
   const router = useRouter();
-  const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.toString() && (!filter || filter(s.input))));
+  const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.base && (!filter || filter(s.input))));
   return new Proxy([], {
     get(_, property) {
       if (property === $TRACK) return subs();
@@ -1083,7 +1103,7 @@ function useAction(action) {
     r
   }, args);
 }
-function action(fn, name) {
+function action(fn, options = {}) {
   function mutate(...variables) {
     const router = this.r;
     const form = this.f;
@@ -1097,6 +1117,17 @@ function action(fn, name) {
     function handler(error) {
       return async res => {
         const result = await handleResponse(res, error, router.navigatorFactory());
+        let retry = null;
+        !o.onComplete?.({
+          ...submission,
+          result: result?.data,
+          error: result?.error,
+          pending: false,
+          retry() {
+            return retry = submission.retry();
+          }
+        });
+        if (retry) return retry;
         if (!result) return submission.clear();
         setResult(result);
         if (result.error && !form) throw result.error;
@@ -1116,7 +1147,7 @@ function action(fn, name) {
         return !result();
       },
       clear() {
-        router.submissions[1](v => v.filter(i => i.input !== variables));
+        router.submissions[1](v => v.filter(i => i !== submission));
       },
       retry() {
         setResult(undefined);
@@ -1126,7 +1157,11 @@ function action(fn, name) {
     }]);
     return p.then(handler(), handler(true));
   }
-  const url = fn.url || name && `https://action/${name}` || (!isServer ? `https://action/${hashString(fn.toString())}` : "");
+  const o = typeof options === "string" ? {
+    name: options
+  } : options;
+  const url = fn.url || o.name && `https://action/${o.name}` || (!isServer ? `https://action/${hashString(fn.toString())}` : "");
+  mutate.base = url;
   return toAction(mutate, url);
 }
 function toAction(fn, url) {
@@ -1138,6 +1173,7 @@ function toAction(fn, url) {
     const newFn = function (...passedArgs) {
       return fn.call(this, ...args, ...passedArgs);
     };
+    newFn.base = fn.base;
     const uri = new URL(url, mockBase);
     uri.searchParams.set("args", hashKey(args));
     return toAction(newFn, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search);
@@ -1179,7 +1215,7 @@ async function handleResponse(response, error, navigate) {
   // invalidate
   cacheKeyOp(keys, entry => entry[0] = 0);
   // set cache
-  flightKeys && flightKeys.forEach(k => cache.set(k, custom[k]));
+  flightKeys && flightKeys.forEach(k => query.set(k, custom[k]));
   // trigger revalidation
   await revalidate(keys, false);
   return data != null ? {
@@ -1646,4 +1682,4 @@ function json(data, init = {}) {
   return response;
 }
 
-export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createAsyncStore, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useCurrentMatches, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useSearchParams, useSubmission, useSubmissions };
+export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createAsyncStore, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, query, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useCurrentMatches, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useSearchParams, useSubmission, useSubmissions };

package/dist/routing.d.ts

@@ -1,5 +1,5 @@
 import { JSX, Accessor } from "solid-js";
-import type { BeforeLeaveEventArgs, Branch, Intent, Location, MatchFilters, NavigateOptions, Navigator, Params, RouteDescription, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SetParams } from "./types.js";
+import type { BeforeLeaveEventArgs, Branch, Intent, Location, MatchFilters, NavigateOptions, Navigator, Params, RouteDescription, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SearchParams, SetSearchParams } from "./types.js";
 export declare const RouterContextObj: import("solid-js").Context<RouterContext | undefined>;
 export declare const RouteContextObj: import("solid-js").Context<RouteContext | undefined>;
 export declare const useRouter: () => RouterContext;
@@ -15,7 +15,7 @@ export declare const usePreloadRoute: () => (url: string | URL, options?: {
 export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S> | undefined) => Accessor<import("./types.js").PathMatch | undefined>;
 export declare const useCurrentMatches: () => () => RouteMatch[];
 export declare const useParams: <T extends Params>() => T;
-export declare const useSearchParams: <T extends Params>() => [Partial<T>, (params: SetParams, options?: Partial<NavigateOptions>) => void];
+export declare const useSearchParams: <T extends SearchParams>() => [Partial<T>, (params: SetSearchParams, options?: Partial<NavigateOptions>) => void];
 export declare const useBeforeLeave: (listener: (e: BeforeLeaveEventArgs) => void) => void;
 export declare function createRoutes(routeDef: RouteDefinition, base?: string): RouteDescription[];
 export declare function createBranch(routes: RouteDescription[], index?: number): Branch;

package/dist/types.d.ts

@@ -22,14 +22,16 @@ declare module "solid-js/web" {
     }
 }
 export type Params = Record<string, string>;
+export type SearchParams = Record<string, string | string[]>;
 export type SetParams = Record<string, string | number | boolean | null | undefined>;
+export type SetSearchParams = Record<string, string | string[] | number | number[] | boolean | boolean[] | null | undefined>;
 export interface Path {
     pathname: string;
     search: string;
     hash: string;
 }
 export interface Location<S = unknown> extends Path {
-    query: Params;
+    query: SearchParams;
     state: Readonly<Partial<S>> | null;
     key: string;
 }
@@ -127,7 +129,7 @@ export interface RouterUtils {
     go(delta: number): void;
     beforeLeave: BeforeLeaveLifecycle;
     paramsWrapper: (getParams: () => Params, branches: () => Branch[]) => Params;
-    queryWrapper: (getQuery: () => Params) => Params;
+    queryWrapper: (getQuery: () => SearchParams) => SearchParams;
 }
 export interface RouterContext {
     base: RouteContext;
@@ -181,7 +183,7 @@ export type SubmissionStub = {
 export interface MaybePreloadableComponent extends Component {
     preload?: () => void;
 }
-export type CacheEntry = [number, any, Intent | undefined, Signal<number> & {
+export type CacheEntry = [number, Promise<any>, any, Intent | undefined, Signal<number> & {
     count: number;
 }];
 export type NarrowResponse<T> = T extends CustomResponse<infer U> ? U : Exclude<T, Response>;

package/dist/utils.d.ts

@@ -1,12 +1,12 @@
-import type { MatchFilters, Params, PathMatch, RouteDescription, SetParams } from "./types.ts";
+import type { MatchFilters, PathMatch, RouteDescription, SearchParams, SetSearchParams } from "./types.ts";
 export declare const mockBase = "http://sr";
 export declare function normalizePath(path: string, omitSlash?: boolean): string;
 export declare function resolvePath(base: string, path: string, from?: string): string | undefined;
 export declare function invariant<T>(value: T | null | undefined, message: string): T;
 export declare function joinPaths(from: string, to: string): string;
-export declare function extractSearchParams(url: URL): Params;
+export declare function extractSearchParams(url: URL): SearchParams;
 export declare function createMatcher<S extends string>(path: S, partial?: boolean, matchFilters?: MatchFilters<S>): (location: string) => PathMatch | null;
 export declare function scoreRoute(route: RouteDescription): number;
 export declare function createMemoObject<T extends Record<string | symbol, unknown>>(fn: () => T): T;
-export declare function mergeSearchString(search: string, params: SetParams): string;
+export declare function mergeSearchString(search: string, params: SetSearchParams): string;
 export declare function expandOptionals(pattern: string): string[];

package/dist/utils.js

@@ -36,7 +36,14 @@ export function joinPaths(from, to) {
 export function extractSearchParams(url) {
     const params = {};
     url.searchParams.forEach((value, key) => {
-        params[key] = value;
+        if (key in params) {
+            if (Array.isArray(params[key]))
+                params[key].push(value);
+            else
+                params[key] = [params[key], value];
+        }
+        else
+            params[key] = value;
     });
     return params;
 }
@@ -128,11 +135,20 @@ export function createMemoObject(fn) {
 export function mergeSearchString(search, params) {
     const merged = new URLSearchParams(search);
     Object.entries(params).forEach(([key, value]) => {
-        if (value == null || value === "") {
+        if (value == null || value === "" || (value instanceof Array && !value.length)) {
             merged.delete(key);
         }
         else {
-            merged.set(key, String(value));
+            if (value instanceof Array) {
+                // Delete all instances of the key before appending
+                merged.delete(key);
+                value.forEach(v => {
+                    merged.append(key, String(v));
+                });
+            }
+            else {
+                merged.set(key, String(value));
+            }
         }
     });
     const s = merged.toString();

package/package.json

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