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

package/README.md

@@ -382,12 +382,12 @@ const user = createAsync(() => getUser(params.id))
 
 Actions are data mutations that can trigger invalidations and further routing. A list of prebuilt response builders can be found below(TODO).
 ```jsx
+import { action, revalidate, redirect } from "@solidjs/router"
+
 // anywhere
 const myAction = action(async (data) => {
   await doMutation(data);
-  return redirect("/", {
-    invalidate: [getUser, data.id]
-  }) // returns a response
+  throw redirect("/", { revalidate: getUser.keyFor(data.id) }); // throw a response to do a redirect
 });
 
 // in component

package/dist/components.jsx

@@ -1,5 +1,3 @@
-/*@refresh skip*/
-"use client";
 import { createMemo, mergeProps, splitProps } from "solid-js";
 import { useHref, useLocation, useNavigate, useResolvedPath } from "./routing";
 import { normalizePath } from "./utils";

package/dist/data/action.js

@@ -77,18 +77,25 @@ export function action(fn, name) {
 }
 async function handleResponse(response, navigate) {
     let data;
-    if (response instanceof Response && redirectStatusCodes.has(response.status)) {
-        const locationUrl = response.headers.get("Location") || "/";
-        if (locationUrl.startsWith("http")) {
-            window.location.href = locationUrl;
+    let keys;
+    if (response instanceof Response) {
+        if (response.headers.has("X-Revalidate")) {
+            keys = response.headers.get("X-Revalidate").split(",");
         }
-        else {
-            navigate(locationUrl);
+        if (response.customBody)
+            data = await response.customBody();
+        if (redirectStatusCodes.has(response.status)) {
+            const locationUrl = response.headers.get("Location") || "/";
+            if (locationUrl.startsWith("http")) {
+                window.location.href = locationUrl;
+            }
+            else {
+                navigate(locationUrl);
+            }
         }
     }
     else
         data = response;
-    // TODO: handle keys
-    await revalidate();
+    await revalidate(keys);
     return data;
 }

package/dist/data/cache.d.ts

@@ -1,3 +1,7 @@
 import { type ReconcileOptions } from "solid-js/store";
-export declare function revalidate(key?: string | any[] | void): Promise<void>;
-export declare function cache<T extends (...args: any) => U | Response, U>(fn: T, name: string, options?: ReconcileOptions): T;
+export declare function revalidate(key?: string | string[] | void): Promise<void>;
+export type CachedFunction<T extends (...args: any) => U | Response, U> = T & {
+    keyFor: (...args: Parameters<T>) => string;
+    key: string;
+};
+export declare function cache<T extends (...args: any) => U | Response, U>(fn: T, name: string, options?: ReconcileOptions): CachedFunction<T, U>;

package/dist/data/cache.js

@@ -5,7 +5,19 @@ import { useNavigate, getIntent } from "../routing";
 import { redirectStatusCodes } from "../utils";
 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[3].size && now - v[0] > CACHE_TIMEOUT) {
+                cacheMap.delete(k);
+            }
+        }
+    }, 300000);
+}
 function getCache() {
     if (!isServer)
         return cacheMap;
@@ -13,13 +25,14 @@ function getCache() {
     return req.routerCache || (req.routerCache = new Map());
 }
 export function revalidate(key) {
+    key && !Array.isArray(key) && (key = [key]);
     return startTransition(() => {
         const now = Date.now();
         for (let k of cacheMap.keys()) {
-            if (key === undefined || k === key) {
-                const set = cacheMap.get(k)[3];
-                revalidateSignals(set, now);
-                cacheMap.delete(k);
+            if (key === undefined || matchKey(k, key)) {
+                const entry = cacheMap.get(k);
+                entry[0] = 0; //force cache miss
+                revalidateSignals(entry[3], now); // retrigger live signals
             }
         }
     });
@@ -30,13 +43,13 @@ function revalidateSignals(set, time) {
 }
 export function cache(fn, name, options) {
     const [store, setStore] = createStore({});
-    return ((...args) => {
+    const cachedFn = ((...args) => {
         const cache = getCache();
         const intent = getIntent();
         const owner = getOwner();
         const navigate = owner ? useNavigate() : undefined;
         const now = Date.now();
-        const key = name + (args.length ? ":" + args.join(":") : "");
+        const key = name + hashKey(args);
         let cached = cache.get(key);
         let version;
         if (owner) {
@@ -53,9 +66,10 @@ export function cache(fn, name, options) {
             }
             let res = cached[1];
             if (!isServer && intent === "navigate") {
-                res = "then" in cached[1]
-                    ? cached[1].then(handleResponse(false), handleResponse(true))
-                    : handleResponse(false)(cached[1]);
+                res =
+                    "then" in cached[1]
+                        ? cached[1].then(handleResponse(false), handleResponse(true))
+                        : handleResponse(false)(cached[1]);
                 startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
             }
             return res;
@@ -79,9 +93,10 @@ export function cache(fn, name, options) {
         else
             cache.set(key, (cached = [now, res, intent, new Set(version ? [version] : [])]));
         if (intent !== "preload") {
-            res = "then" in res
-                ? res.then(handleResponse(false), handleResponse(true))
-                : handleResponse(false)(res);
+            res =
+                "then" in res
+                    ? res.then(handleResponse(false), handleResponse(true))
+                    : handleResponse(false)(res);
         }
         return res;
         function handleResponse(error) {
@@ -111,4 +126,32 @@ export function cache(fn, name, options) {
             };
         }
     });
+    cachedFn.keyFor = (...args) => name + hashKey(args);
+    cachedFn.key = name;
+    return cachedFn;
+}
+function matchKey(key, keys) {
+    for (let k of keys) {
+        if (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
+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/data/index.d.ts

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

package/dist/data/response.d.ts

@@ -1 +1,5 @@
-export declare function redirect(url: string, init?: number | ResponseInit): Response;
+export type RouterResponseInit = ResponseInit & {
+    revalidate?: string | string[];
+};
+export declare function redirect(url: string, init?: number | RouterResponseInit): Response;
+export declare function reload(init: RouterResponseInit): Response;

package/dist/data/response.js

@@ -1,16 +1,28 @@
 export function redirect(url, init = 302) {
-    let responseInit = init;
-    if (typeof responseInit === "number") {
-        responseInit = { status: responseInit };
+    let responseInit;
+    let revalidate;
+    if (typeof init === "number") {
+        responseInit = { status: init };
     }
-    else if (typeof responseInit.status === "undefined") {
-        responseInit.status = 302;
+    else {
+        ({ revalidate, ...responseInit } = init);
+        if (typeof responseInit.status === "undefined") {
+            responseInit.status = 302;
+        }
     }
     const headers = new Headers(responseInit.headers);
     headers.set("Location", url);
+    revalidate && headers.set("X-Revalidate", revalidate.toString());
     const response = new Response(null, {
         ...responseInit,
         headers: headers
     });
     return response;
 }
+export function reload(init) {
+    const { revalidate, ...responseInit } = init;
+    return new Response(null, {
+        ...responseInit,
+        ...(revalidate ? { headers: new Headers(responseInit.headers).set("X-Revalidate", revalidate.toString()) } : {})
+    });
+}

package/dist/index.js

@@ -586,7 +586,7 @@ function createRouteContext(router, parent, outlet, match, params) {
   load && load({
     params,
     location,
-    intent: intent || "navigate"
+    intent: intent || "initial"
   });
   return route;
 }
@@ -757,36 +757,51 @@ function StaticRouter(props) {
 
 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[3].size && now - v[0] > CACHE_TIMEOUT) {
+        cacheMap.delete(k);
+      }
+    }
+  }, 300000);
+}
 function getCache() {
   if (!isServer) return cacheMap;
   const req = getRequestEvent() || sharedConfig.context;
   return req.routerCache || (req.routerCache = new Map());
 }
 function revalidate(key) {
+  key && !Array.isArray(key) && (key = [key]);
   return startTransition(() => {
     const now = Date.now();
     for (let k of cacheMap.keys()) {
-      if (key === undefined || k === key) {
-        const set = cacheMap.get(k)[3];
-        revalidateSignals(set, now);
-        cacheMap.delete(k);
+      if (key === undefined || matchKey(k, key)) {
+        const entry = cacheMap.get(k);
+        entry[0] = 0; //force cache miss
+        revalidateSignals(entry[3], now); // retrigger live signals
       }
     }
   });
 }
+
 function revalidateSignals(set, time) {
   for (let s of set) s[1](time);
 }
 function cache(fn, name, options) {
   const [store, setStore] = createStore({});
-  return (...args) => {
+  const cachedFn = (...args) => {
     const cache = getCache();
     const intent = getIntent();
     const owner = getOwner();
     const navigate = owner ? useNavigate() : undefined;
     const now = Date.now();
-    const key = name + (args.length ? ":" + args.join(":") : "");
+    const key = name + hashKey(args);
     let cached = cache.get(key);
     let version;
     if (owner) {
@@ -855,6 +870,28 @@ function cache(fn, name, options) {
       };
     }
   };
+  cachedFn.keyFor = (...args) => name + hashKey(args);
+  cachedFn.key = name;
+  return cachedFn;
+}
+function matchKey(key, keys) {
+  for (let k of keys) {
+    if (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
+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);
 }
 
 const actions = /* #__PURE__ */new Map();
@@ -926,16 +963,22 @@ function action(fn, name) {
 }
 async function handleResponse(response, navigate) {
   let data;
-  if (response instanceof Response && redirectStatusCodes.has(response.status)) {
-    const locationUrl = response.headers.get("Location") || "/";
-    if (locationUrl.startsWith("http")) {
-      window.location.href = locationUrl;
-    } else {
-      navigate(locationUrl);
+  let keys;
+  if (response instanceof Response) {
+    if (response.headers.has("X-Revalidate")) {
+      keys = response.headers.get("X-Revalidate").split(",");
+    }
+    if (response.customBody) data = await response.customBody();
+    if (redirectStatusCodes.has(response.status)) {
+      const locationUrl = response.headers.get("Location") || "/";
+      if (locationUrl.startsWith("http")) {
+        window.location.href = locationUrl;
+      } else {
+        navigate(locationUrl);
+      }
     }
   } else data = response;
-  // TODO: handle keys
-  await revalidate();
+  await revalidate(keys);
   return data;
 }
 
@@ -1100,7 +1143,7 @@ function HashRouter(props) {
   })(props);
 }
 
-function MemoryRouter(props) {
+function createMemoryHistory() {
   const entries = ["/"];
   let index = 0;
   const listeners = [];
@@ -1110,13 +1153,13 @@ function MemoryRouter(props) {
     const value = entries[index];
     listeners.forEach(listener => listener(value));
   };
-  return createRouter({
+  return {
     get: () => entries[index],
-    set({
+    set: ({
       value,
       scroll,
       replace
-    }) {
+    }) => {
       if (replace) {
         entries[index] = value;
       } else {
@@ -1127,20 +1170,34 @@ function MemoryRouter(props) {
         scrollToHash(value.split("#")[1] || "", true);
       }
     },
-    init(listener) {
+    back: () => {
+      go(-1);
+    },
+    forward: () => {
+      go(1);
+    },
+    go,
+    listen: listener => {
       listeners.push(listener);
       return () => {
         const index = listeners.indexOf(listener);
         listeners.splice(index, 1);
       };
-    },
+    }
+  };
+}
+function MemoryRouter(props) {
+  const memoryHistory = props.history || createMemoryHistory();
+  return createRouter({
+    get: memoryHistory.get,
+    set: memoryHistory.set,
+    init: memoryHistory.listen,
     utils: {
-      go
+      go: memoryHistory.go
     }
   })(props);
 }
 
-/*@refresh skip*/
 const _tmpl$ = /*#__PURE__*/template(`<a>`);
 function A(props) {
   props = mergeProps({
@@ -1255,16 +1312,24 @@ function subFetch(fn) {
 }
 
 function redirect(url, init = 302) {
-  let responseInit = init;
-  if (typeof responseInit === "number") {
+  let responseInit;
+  let revalidate;
+  if (typeof init === "number") {
     responseInit = {
-      status: responseInit
+      status: init
     };
-  } else if (typeof responseInit.status === "undefined") {
-    responseInit.status = 302;
+  } else {
+    ({
+      revalidate,
+      ...responseInit
+    } = init);
+    if (typeof responseInit.status === "undefined") {
+      responseInit.status = 302;
+    }
   }
   const headers = new Headers(responseInit.headers);
   headers.set("Location", url);
+  revalidate && headers.set("X-Revalidate", revalidate.toString());
   const response = new Response(null, {
     ...responseInit,
     headers: headers
@@ -1272,4 +1337,4 @@ function redirect(url, init = 302) {
   return response;
 }
 
-export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createBeforeLeave, createRouter, redirect, revalidate, useAction, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };
+export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createBeforeLeave, createMemoryHistory, createRouter, redirect, revalidate, useAction, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };

package/dist/routers/HashRouter.d.ts

@@ -1,4 +1,5 @@
 import type { JSX } from "solid-js";
-import type { RouterProps } from "./components";
+import type { BaseRouterProps } from "./components";
 export declare function hashParser(str: string): string;
-export declare function HashRouter(props: RouterProps): JSX.Element;
+export type HashRouterProps = BaseRouterProps;
+export declare function HashRouter(props: HashRouterProps): JSX.Element;

package/dist/routers/MemoryRouter.d.ts

@@ -1,3 +1,21 @@
-import type { RouterProps } from "./components";
+import type { LocationChange } from "../types";
+import type { BaseRouterProps } from "./components";
 import type { JSX } from "solid-js";
-export declare function MemoryRouter(props: RouterProps): JSX.Element;
+export type MemoryHistory = {
+    get: () => string;
+    set: (change: LocationChange) => void;
+    go: (delta: number) => void;
+    listen: (listener: (value: string) => void) => () => void;
+};
+export declare function createMemoryHistory(): {
+    get: () => string;
+    set: ({ value, scroll, replace }: LocationChange) => void;
+    back: () => void;
+    forward: () => void;
+    go: (n: number) => void;
+    listen: (listener: (value: string) => void) => () => void;
+};
+export type MemoryRouterProps = BaseRouterProps & {
+    history?: MemoryHistory;
+};
+export declare function MemoryRouter(props: MemoryRouterProps): JSX.Element;

package/dist/routers/MemoryRouter.js

@@ -1,5 +1,5 @@
 import { createRouter, scrollToHash } from "./createRouter";
-export function MemoryRouter(props) {
+export function createMemoryHistory() {
     const entries = ["/"];
     let index = 0;
     const listeners = [];
@@ -9,9 +9,9 @@ export function MemoryRouter(props) {
         const value = entries[index];
         listeners.forEach(listener => listener(value));
     };
-    return createRouter({
+    return {
         get: () => entries[index],
-        set({ value, scroll, replace }) {
+        set: ({ value, scroll, replace }) => {
             if (replace) {
                 entries[index] = value;
             }
@@ -23,15 +23,30 @@ export function MemoryRouter(props) {
                 scrollToHash(value.split("#")[1] || "", true);
             }
         },
-        init(listener) {
+        back: () => {
+            go(-1);
+        },
+        forward: () => {
+            go(1);
+        },
+        go,
+        listen: (listener) => {
             listeners.push(listener);
             return () => {
                 const index = listeners.indexOf(listener);
                 listeners.splice(index, 1);
             };
-        },
+        }
+    };
+}
+export function MemoryRouter(props) {
+    const memoryHistory = props.history || createMemoryHistory();
+    return createRouter({
+        get: memoryHistory.get,
+        set: memoryHistory.set,
+        init: memoryHistory.listen,
         utils: {
-            go
+            go: memoryHistory.go
         }
     })(props);
 }

package/dist/routers/Router.d.ts

@@ -1,5 +1,6 @@
-import type { RouterProps } from "./components";
+import type { BaseRouterProps } from "./components";
 import type { JSX } from "solid-js";
-export declare function Router(props: RouterProps & {
+export type RouterProps = BaseRouterProps & {
     url?: string;
-}): JSX.Element;
+};
+export declare function Router(props: RouterProps): JSX.Element;

package/dist/routers/StaticRouter.d.ts

@@ -1,5 +1,6 @@
-import { type RouterProps } from "./components";
+import { type BaseRouterProps } from "./components";
 import type { JSX } from "solid-js";
-export declare function StaticRouter(props: RouterProps & {
+export type StaticRouterProps = BaseRouterProps & {
     url?: string;
-}): JSX.Element;
+};
+export declare function StaticRouter(props: StaticRouterProps): JSX.Element;

package/dist/routers/components.d.ts

@@ -1,12 +1,12 @@
 import type { Component, JSX } from "solid-js";
 import type { MatchFilters, RouteLoadFunc, RouterIntegration, RouteSectionProps } from "../types";
-export type RouterProps = {
+export type BaseRouterProps = {
     base?: string;
     actionBase?: string;
     root?: Component<RouteSectionProps>;
     children?: JSX.Element;
 };
-export declare const createRouterComponent: (router: RouterIntegration) => (props: RouterProps) => JSX.Element;
+export declare const createRouterComponent: (router: RouterIntegration) => (props: BaseRouterProps) => JSX.Element;
 export type RouteProps<S extends string> = {
     path?: S | S[];
     children?: JSX.Element;

package/dist/routers/createRouter.d.ts

@@ -5,6 +5,6 @@ export declare function createRouter(config: {
     init?: (notify: (value?: string | LocationChange) => void) => () => void;
     create?: (router: RouterContext) => void;
     utils?: Partial<RouterUtils>;
-}): (props: import("./components").RouterProps) => import("solid-js").JSX.Element;
+}): (props: import("./components").BaseRouterProps) => import("solid-js").JSX.Element;
 export declare function bindEvent(target: EventTarget, type: string, handler: EventListener): () => void;
 export declare function scrollToHash(hash: string, fallbackTop?: boolean): void;

package/dist/routers/index.d.ts

@@ -1,7 +1,11 @@
 export { Route } from "./components";
-export type { RouterProps, RouteProps } from "./components";
+export type { BaseRouterProps, RouteProps } from "./components";
 export { createRouter } from "./createRouter";
 export { Router } from "./Router";
+export type { RouterProps } from "./Router";
 export { HashRouter } from "./HashRouter";
-export { MemoryRouter } from "./MemoryRouter";
+export type { HashRouterProps } from "./HashRouter";
+export { MemoryRouter, createMemoryHistory } from "./MemoryRouter";
+export type { MemoryRouterProps, MemoryHistory } from "./MemoryRouter";
 export { StaticRouter } from "./StaticRouter";
+export type { StaticRouterProps } from "./StaticRouter";

package/dist/routers/index.js

@@ -2,5 +2,5 @@ export { Route } from "./components";
 export { createRouter } from "./createRouter";
 export { Router } from "./Router";
 export { HashRouter } from "./HashRouter";
-export { MemoryRouter } from "./MemoryRouter";
+export { MemoryRouter, createMemoryHistory } from "./MemoryRouter";
 export { StaticRouter } from "./StaticRouter";

package/dist/routing.js

@@ -381,6 +381,6 @@ export function createRouteContext(router, parent, outlet, match, params) {
     component &&
         component.preload &&
         component.preload();
-    load && load({ params, location, intent: intent || "navigate" });
+    load && load({ params, location, intent: intent || "initial" });
     return route;
 }

package/dist/types.d.ts

@@ -39,7 +39,7 @@ export interface RouterIntegration {
     create?: (router: RouterContext) => void;
     utils?: Partial<RouterUtils>;
 }
-export type Intent = "native" | "navigate" | "preload";
+export type Intent = "initial" | "native" | "navigate" | "preload";
 export interface RouteLoadFuncArgs {
     params: Params;
     location: Location;

package/package.json

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