@solidjs/router 0.10.0-beta.8 → 0.10.0

package/README.md

@@ -4,6 +4,8 @@
 
 # Solid Router [![npm Version](https://img.shields.io/npm/v/@solidjs/router.svg?style=flat-square)](https://www.npmjs.org/package/@solidjs/router)
 
+**Version 0.10.0 requires Solid v1.8.4 or later.**
+
 A router lets you change your view based on the URL in the browser. This allows your "single-page" application to simulate a traditional multipage site. To use Solid Router, you specify components called Routes that depend on the value of the URL (the "path"), and the router handles the mechanism of swapping them in and out.
 
 Solid Router is a universal router for SolidJS - it works whether you're rendering on the client or on the server. It was inspired by and combines paradigms of React Router and the Ember Router. Routes can be defined directly in your app's template using JSX, but you can also pass your route configuration directly as an object. It also supports nested routing, so navigation can change a part of a component, rather than completely replacing it.
@@ -368,7 +370,17 @@ This cache accomplishes the following:
 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.
 
-This cache can be defined anywhere and then used inside your components with:
+Cached function has a few useful methods for getting the key that are useful for invalidation.
+```ts
+let id = 5;
+
+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`.
+
+`cache` can be defined anywhere and then used inside your components with:
 
 ### `createAsync`
 
@@ -378,9 +390,11 @@ This is light wrapper over `createResource` that aims to serve as stand-in for a
 const user = createAsync(() => getUser(params.id))
 ```
 
+Using `cache` in `createResource` directly won't work properly as the fetcher is not reactive and it won't invalidate properly.
+
 ### `action`
 
-Actions are data mutations that can trigger invalidations and further routing. A list of prebuilt response builders can be found below(TODO).
+Actions are data mutations that can trigger invalidations and further routing. A list of prebuilt response helpers can be found below.
 ```jsx
 import { action, revalidate, redirect } from "@solidjs/router"
 
@@ -391,12 +405,38 @@ const myAction = action(async (data) => {
 });
 
 // in component
-<form action={myAction} />
+<form action={myAction} method="post" />
 
 //or
 <button type="submit" formaction={myAction}></button>
 ```
 
+Actions only work with post requests, so make sure to put `method="post"` on your form.
+
+Sometimes it might be easier to deal with typed data instead of `FormData` and adding additional hidden fields. For that reason Actions have a with method. That works similar to `bind` which applies the arguments in order.
+
+Picture an action that deletes Todo Item:
+
+```js
+const deleteTodo = action(async (formData: FormData) => {
+  const id = Number(formData.get("id"))
+  await api.deleteTodo(id)
+})
+
+<form action={deleteUser} method="post">
+  <input type="hidden" name="id" value={todo.id} />
+  <button type="submit">Delete</button>
+</form>
+```
+Instead with `with` you can write this:
+```js
+const deleteUser = action(api.deleteUser)
+
+<form action={deleteUser.with(todo.id)} method="post">
+  <button type="submit">Delete</button>
+</form>
+```
+
 #### Notes of `<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.
 
@@ -414,7 +454,7 @@ const submit = useAction(myAction)
 submit(...args)
 ```
 
-The outside of a form context you can use custom data instead of formData, and these helpers preserve types.
+The outside of a form context you can use custom data instead of formData, and these helpers preserve types. However, even when used with server functions (in projects like SolidStart) this requires client side javascript and is not Progressive Enhancible like forms are.
 
 ### `useSubmission`/`useSubmissions`
 
@@ -434,6 +474,36 @@ const submissions = useSubmissions(action, (input) => filter(input));
 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.
+
+#### `redirect(path, options)`
+
+Redirects to the next route
+```js
+const getUser = cache(() => {
+  const user = await api.getCurrentUser()
+  if (!user) throw redirect("/login");
+  return user;
+})
+```
+
+#### `reload(options)`
+
+Reloads the data on the current page
+```js
+const getTodo = cache(async (id: number) => {
+  const todo = await fetchTodo(id);
+  return todo;
+}, "todo")
+
+const updateTodo = action(async (todo: Todo) => {
+  await updateTodo(todo.id, todo);
+  reload({ revalidate: getTodo.keyFor(id) })
+})
+```
+
 ### Load Functions
 
 Even with the cache API it is possible that we have waterfalls both with view logic and with lazy loaded code. With load functions, we can instead start fetching the data parallel to loading the route, so we can use the data as soon as possible.
@@ -571,9 +641,22 @@ import { Router } from "@solidjs/router";
 
 ## Components
 
+### `<Router>`
+
+This is the main Router component for the browser.
+
+| prop | type | description |
+|-----|----|----|
+| children | `JSX.Element` or `RouteDefinition[]` | The route definitions |
+| root | Component | Top level layout component |
+| base | string | Base url to use for matching routes |
+| actionBase | string | Root url for server actions, default: `/_server` |
+| preload | boolean | Enables/disables preloads globally, default: `true` |
+| explicitLinks | boolean | Disables all anchors being intercepted and instead requires `<A>`. default: `false` |
+
 ### `<A>`
 
-Like the `<a>` tag but supports relative paths and active class styling.
+Like the `<a>` tag but supports relative paths and active class styling (requires client side JavaScript).
 
 The `<A>` tag has an `active` class if its href matches the current location, and `inactive` otherwise. **Note:** By default matching includes locations that are descendents (eg. href `/users` matches locations `/users` and `/users/123`), use the boolean `end` prop to prevent matching these. This is particularly useful for links to the root route `/` which would match everything.
 
@@ -608,7 +691,11 @@ The Component for defining Routes:
 
 | prop | type | description |
 |-|-|-|
-|TODO
+| path | string | Path partial for defining the route segment |
+| component | `Component` | Component that will be rendered for the matched segment |
+| matchFilters | `MatchFilters` | Additional constraints for matching against the route |
+| children | `JSX.Element` | Nested `<Route>` definitions |
+| load | `RouteLoadFunc` | Function called during preload or when the route is navigated to. |
 
 ## Router Primitives
 
@@ -729,15 +816,15 @@ useBeforeLeave((e: BeforeLeaveEventArgs) => {
 });
 ```
 
-## Migrations from 0.8.x
+## Migrations from 0.9.x
 
-v0.9.0 brings some big changes to support the future of routing including Islands/Partial Hydration hybrid solutions. Most notably there is no Context API available in non-hydrating parts of the application.
+v0.10.0 brings some big changes to support the future of routing including Islands/Partial Hydration hybrid solutions. Most notably there is no Context API available in non-hydrating parts of the application.
 
 The biggest changes are around removed APIs that need to be replaced.
 
 ### `<Outlet>`, `<Routes>`, `useRoutes`
 
-This is no longer used and instead will use `props.children` passed from into the page components for outlets. Nested Routes inherently cause waterfalls and are Outlets in a sense themselves. We do not want to encourage the pattern and if you must do it you can always nest `<Routers>` with appropriate base path.
+This is no longer used and instead will use `props.children` passed from into the page components for outlets. This keeps the outlet directly passed from its page and avoids oddness of trying to use context across Islands boundaries. Nested `<Routes>` components inherently cause waterfalls and are `<Outlets>` themselves so they have the same concerns. We do not want to encourage the pattern and if you must do it you can always nest `<Router>`s with appropriate base path.
 
 ## `element` prop removed from `Route`
 
@@ -745,7 +832,7 @@ Related without Outlet component it has to be passed in manually. At which point
 
 ### `data` functions & `useRouteData`
 
-These have been replaced by a load mechanism. This  allows link hover preloads (as the load 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 load mechanism. This  allows link hover preloads (as the load 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.
 
 ## SPAs in Deployed Environments
 

package/dist/components.d.ts

@@ -7,6 +7,7 @@ declare module "solid-js" {
             noScroll?: boolean;
             replace?: boolean;
             preload?: boolean;
+            link?: boolean;
         }
     }
 }

package/dist/components.jsx

@@ -27,7 +27,7 @@ export function A(props) {
             [props.inactiveClass]: !isActive(),
             [props.activeClass]: isActive(),
             ...rest.classList
-        }} aria-current={isActive() ? "page" : undefined}/>);
+        }} link aria-current={isActive() ? "page" : undefined}/>);
 }
 export function Navigate(props) {
     const navigate = useNavigate();

package/dist/data/action.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from "solid-js";
 import { Submission } from "../types";
-export type Action<T extends Array<any>, U> = ((...vars: T) => Promise<U>) & JSX.SerializableAttributeValue & {
+export type Action<T extends Array<any>, U> = (T extends [FormData] | [] ? JSX.SerializableAttributeValue : unknown) & ((...vars: T) => Promise<U>) & {
     url: string;
     with<A extends any[], B extends any[]>(this: (this: any, ...args: [...A, ...B]) => U, ...args: A): Action<B, U>;
 };

package/dist/data/action.js

@@ -1,8 +1,8 @@
-import { $TRACK, createMemo, createSignal, onCleanup, getOwner } 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 { hashKey, revalidate } from "./cache";
+import { cacheKeyOp, hashKey, revalidate } from "./cache";
 export const actions = /* #__PURE__ */ new Map();
 export function useSubmissions(fn, filter) {
     const router = useRouter();
@@ -65,7 +65,9 @@ export function action(fn, name) {
         p.then(handler, handler);
         return p;
     }
-    const url = fn.url || (name && `action:${name}`) || (!isServer ? `action:${fn.name}` : "");
+    const url = fn.url ||
+        (name && `action:${name}`) ||
+        (!isServer ? `action:${hashString(fn.toString())}` : "");
     return toAction(mutate, url);
 }
 function toAction(fn, url) {
@@ -80,7 +82,7 @@ function toAction(fn, url) {
         };
         const uri = new URL(url, "http://sar");
         uri.searchParams.set("args", hashKey(args));
-        return toAction(newFn, uri.pathname + uri.search);
+        return toAction(newFn, (uri.protocol === "action:" ? uri.protocol : "") + uri.pathname + uri.search);
     };
     fn.url = url;
     if (!isServer) {
@@ -89,12 +91,15 @@ function toAction(fn, url) {
     }
     return fn;
 }
+const hashString = (s) => s.split("").reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
 async function handleResponse(response, navigate) {
     let data;
     let keys;
     if (response instanceof Response) {
         if (response.headers.has("X-Revalidate")) {
             keys = response.headers.get("X-Revalidate").split(",");
+            // invalidate
+            cacheKeyOp(keys, entry => (entry[0] = 0));
         }
         if (response.customBody)
             data = await response.customBody();
@@ -110,6 +115,7 @@ async function handleResponse(response, navigate) {
     }
     else
         data = response;
-    await revalidate(keys);
+    // trigger revalidation
+    await revalidate(keys, false);
     return data;
 }

package/dist/data/cache.d.ts

@@ -1,8 +1,15 @@
+import { type Signal } from "solid-js";
 import { type ReconcileOptions } from "solid-js/store";
-export declare function revalidate(key?: string | string[] | void): Promise<void>;
+type CacheEntry = [number, any, string, Set<Signal<number>>];
+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) => 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>;
+export declare namespace cache {
+    var set: (key: string, value: any) => void;
+}
 export declare function hashKey<T extends Array<any>>(args: T): string;
+export {};

package/dist/data/cache.js

@@ -22,21 +22,26 @@ function getCache() {
     if (!isServer)
         return cacheMap;
     const req = getRequestEvent() || sharedConfig.context;
+    if (!req)
+        throw new Error("Cannot find cache context");
     return req.routerCache || (req.routerCache = new Map());
 }
-export function revalidate(key) {
-    key && !Array.isArray(key) && (key = [key]);
+export function revalidate(key, force = true) {
     return startTransition(() => {
         const now = Date.now();
-        for (let k of cacheMap.keys()) {
-            if (key === undefined || matchKey(k, key)) {
-                const entry = cacheMap.get(k);
-                entry[0] = 0; //force cache miss
-                revalidateSignals(entry[3], now); // retrigger live signals
-            }
-        }
+        cacheKeyOp(key, entry => {
+            force && (entry[0] = 0); //force cache miss
+            revalidateSignals(entry[3], 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));
+    }
+}
 function revalidateSignals(set, time) {
     for (let s of set)
         s[1](time);
@@ -79,7 +84,8 @@ export function cache(fn, name, options) {
             : fn(...args);
         // serialize on server
         if (isServer && sharedConfig.context && !sharedConfig.context.noHydrate) {
-            sharedConfig.context && sharedConfig.context.serialize(key, res);
+            const e = getRequestEvent();
+            (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
         }
         if (cached) {
             cached[0] = now;
@@ -130,6 +136,26 @@ export function cache(fn, name, options) {
     cachedFn.key = name;
     return cachedFn;
 }
+cache.set = (key, value) => {
+    const cache = getCache();
+    const now = Date.now();
+    let cached = cache.get(key);
+    let version;
+    if (getOwner()) {
+        version = createSignal(now, {
+            equals: (p, v) => v - p < 50 // margin of error
+        });
+        onCleanup(() => cached[3].delete(version));
+    }
+    if (cached) {
+        cached[0] = now;
+        cached[1] = value;
+        cached[2] = "preload";
+        version && cached[3].add(version);
+    }
+    else
+        cache.set(key, (cached = [now, value, , new Set(version ? [version] : [])]));
+};
 function matchKey(key, keys) {
     for (let k of keys) {
         if (key.startsWith(k))

package/dist/data/events.d.ts

@@ -1,2 +1,2 @@
 import type { RouterContext } from "../types";
-export declare function setupNativeEvents(router: RouterContext): void;
+export declare function setupNativeEvents(preload?: boolean, explicitLinks?: boolean, actionBase?: string): (router: RouterContext) => void;

package/dist/data/events.js

@@ -1,118 +1,126 @@
 import { delegateEvents } from "solid-js/web";
 import { onCleanup } from "solid-js";
 import { actions } from "./action";
-export function setupNativeEvents(router) {
-    const basePath = router.base.path();
-    const navigateFromRoute = router.navigatorFactory(router.base);
-    let preloadTimeout = {};
-    function isSvg(el) {
-        return el.namespaceURI === "http://www.w3.org/2000/svg";
-    }
-    function handleAnchor(evt) {
-        if (evt.defaultPrevented ||
-            evt.button !== 0 ||
-            evt.metaKey ||
-            evt.altKey ||
-            evt.ctrlKey ||
-            evt.shiftKey)
-            return;
-        const a = evt
-            .composedPath()
-            .find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
-        if (!a)
-            return;
-        const svg = isSvg(a);
-        const href = svg ? a.href.baseVal : a.href;
-        const target = svg ? a.target.baseVal : a.target;
-        if (target || (!href && !a.hasAttribute("state")))
-            return;
-        const rel = (a.getAttribute("rel") || "").split(/\s+/);
-        if (a.hasAttribute("download") || (rel && rel.includes("external")))
-            return;
-        const url = svg ? new URL(href, document.baseURI) : new URL(href);
-        if (url.origin !== window.location.origin ||
-            (basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())))
-            return;
-        return [a, url];
-    }
-    function handleAnchorClick(evt) {
-        const res = handleAnchor(evt);
-        if (!res)
-            return;
-        const [a, url] = res;
-        const to = router.parsePath(url.pathname + url.search + url.hash);
-        const state = a.getAttribute("state");
-        evt.preventDefault();
-        navigateFromRoute(to, {
-            resolve: false,
-            replace: a.hasAttribute("replace"),
-            scroll: !a.hasAttribute("noscroll"),
-            state: state && JSON.parse(state)
-        });
-    }
-    function handleAnchorPreload(evt) {
-        const res = handleAnchor(evt);
-        if (!res)
-            return;
-        const [a, url] = res;
-        if (!preloadTimeout[url.pathname])
-            router.preloadRoute(url, a.getAttribute("preload") !== "false");
-    }
-    function handleAnchorIn(evt) {
-        const res = handleAnchor(evt);
-        if (!res)
-            return;
-        const [a, url] = res;
-        if (preloadTimeout[url.pathname])
-            return;
-        preloadTimeout[url.pathname] = setTimeout(() => {
-            router.preloadRoute(url, a.getAttribute("preload") !== "false");
-            delete preloadTimeout[url.pathname];
-        }, 200);
-    }
-    function handleAnchorOut(evt) {
-        const res = handleAnchor(evt);
-        if (!res)
-            return;
-        const [, url] = res;
-        if (preloadTimeout[url.pathname]) {
-            clearTimeout(preloadTimeout[url.pathname]);
-            delete preloadTimeout[url.pathname];
+export function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "/_server") {
+    return (router) => {
+        const basePath = router.base.path();
+        const navigateFromRoute = router.navigatorFactory(router.base);
+        let preloadTimeout = {};
+        function isSvg(el) {
+            return el.namespaceURI === "http://www.w3.org/2000/svg";
         }
-    }
-    function handleFormSubmit(evt) {
-        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);
-            actionRef = router.parsePath(url.pathname + url.search);
-            if (!actionRef.startsWith(router.actionBase))
+        function handleAnchor(evt) {
+            if (evt.defaultPrevented ||
+                evt.button !== 0 ||
+                evt.metaKey ||
+                evt.altKey ||
+                evt.ctrlKey ||
+                evt.shiftKey)
+                return;
+            const a = evt
+                .composedPath()
+                .find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
+            if (!a || (explicitLinks && !a.getAttribute("link")))
+                return;
+            const svg = isSvg(a);
+            const href = svg ? a.href.baseVal : a.href;
+            const target = svg ? a.target.baseVal : a.target;
+            if (target || (!href && !a.hasAttribute("state")))
+                return;
+            const rel = (a.getAttribute("rel") || "").split(/\s+/);
+            if (a.hasAttribute("download") || (rel && rel.includes("external")))
+                return;
+            const url = svg ? new URL(href, document.baseURI) : new URL(href);
+            if (url.origin !== window.location.origin ||
+                (basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())))
                 return;
+            return [a, url];
         }
-        const handler = actions.get(actionRef);
-        if (handler) {
+        function handleAnchorClick(evt) {
+            const res = handleAnchor(evt);
+            if (!res)
+                return;
+            const [a, url] = res;
+            const to = router.parsePath(url.pathname + url.search + url.hash);
+            const state = a.getAttribute("state");
             evt.preventDefault();
-            const data = new FormData(evt.target);
-            handler.call(router, data);
+            navigateFromRoute(to, {
+                resolve: false,
+                replace: a.hasAttribute("replace"),
+                scroll: !a.hasAttribute("noscroll"),
+                state: state && JSON.parse(state)
+            });
+        }
+        function handleAnchorPreload(evt) {
+            const res = handleAnchor(evt);
+            if (!res)
+                return;
+            const [a, url] = res;
+            if (!preloadTimeout[url.pathname])
+                router.preloadRoute(url, a.getAttribute("preload") !== "false");
         }
-    }
-    // ensure delegated event run first
-    delegateEvents(["click", "submit"]);
-    document.addEventListener("click", handleAnchorClick);
-    document.addEventListener("mouseover", handleAnchorIn);
-    document.addEventListener("mouseout", handleAnchorOut);
-    document.addEventListener("focusin", handleAnchorPreload);
-    document.addEventListener("touchstart", handleAnchorPreload);
-    document.addEventListener("submit", handleFormSubmit);
-    onCleanup(() => {
-        document.removeEventListener("click", handleAnchorClick);
-        document.removeEventListener("mouseover", handleAnchorIn);
-        document.removeEventListener("mouseout", handleAnchorOut);
-        document.removeEventListener("focusin", handleAnchorPreload);
-        document.removeEventListener("touchstart", handleAnchorPreload);
-        document.removeEventListener("submit", handleFormSubmit);
-    });
+        function handleAnchorIn(evt) {
+            const res = handleAnchor(evt);
+            if (!res)
+                return;
+            const [a, url] = res;
+            if (preloadTimeout[url.pathname])
+                return;
+            preloadTimeout[url.pathname] = setTimeout(() => {
+                router.preloadRoute(url, a.getAttribute("preload") !== "false");
+                delete preloadTimeout[url.pathname];
+            }, 200);
+        }
+        function handleAnchorOut(evt) {
+            const res = handleAnchor(evt);
+            if (!res)
+                return;
+            const [, url] = res;
+            if (preloadTimeout[url.pathname]) {
+                clearTimeout(preloadTimeout[url.pathname]);
+                delete preloadTimeout[url.pathname];
+            }
+        }
+        function handleFormSubmit(evt) {
+            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);
+                actionRef = router.parsePath(url.pathname + url.search);
+                if (!actionRef.startsWith(actionBase))
+                    return;
+            }
+            if (evt.target.method.toUpperCase() !== "POST")
+                throw new Error("Only POST forms are supported for Actions");
+            const handler = actions.get(actionRef);
+            if (handler) {
+                evt.preventDefault();
+                const data = new FormData(evt.target);
+                handler.call(router, data);
+            }
+        }
+        // ensure delegated event run first
+        delegateEvents(["click", "submit"]);
+        document.addEventListener("click", handleAnchorClick);
+        if (preload) {
+            document.addEventListener("mouseover", handleAnchorIn);
+            document.addEventListener("mouseout", handleAnchorOut);
+            document.addEventListener("focusin", handleAnchorPreload);
+            document.addEventListener("touchstart", handleAnchorPreload);
+        }
+        document.addEventListener("submit", handleFormSubmit);
+        onCleanup(() => {
+            document.removeEventListener("click", handleAnchorClick);
+            if (preload) {
+                document.removeEventListener("mouseover", handleAnchorIn);
+                document.removeEventListener("mouseout", handleAnchorOut);
+                document.removeEventListener("focusin", handleAnchorPreload);
+                document.removeEventListener("touchstart", handleAnchorPreload);
+            }
+            document.removeEventListener("submit", handleFormSubmit);
+        });
+    };
 }

package/dist/index.js

@@ -421,7 +421,6 @@ function createRouterContext(integration, getBranches, options = {}) {
   });
   return {
     base: baseRoute,
-    actionBase: options.actionBase || "/_server",
     location,
     isRouting,
     renderPath,
@@ -587,8 +586,7 @@ function createRouteContext(router, parent, outlet, match, params) {
 
 const createRouterComponent = router => props => {
   const {
-    base,
-    actionBase
+    base
   } = props;
   const routeDefs = children(() => props.children);
   const branches = createMemo(() => createBranches(props.root ? {
@@ -596,8 +594,7 @@ const createRouterComponent = router => props => {
     children: routeDefs()
   } : routeDefs(), props.base || ""));
   const routerState = createRouterContext(router, branches, {
-    base,
-    actionBase
+    base
   });
   router.create && router.create(routerState);
   return createComponent$1(RouterContextObj.Provider, {
@@ -768,22 +765,25 @@ if (!isServer) {
 function getCache() {
   if (!isServer) return cacheMap;
   const req = getRequestEvent() || sharedConfig.context;
+  if (!req) throw new Error("Cannot find cache context");
   return req.routerCache || (req.routerCache = new Map());
 }
-function revalidate(key) {
-  key && !Array.isArray(key) && (key = [key]);
+function revalidate(key, force = true) {
   return startTransition(() => {
     const now = Date.now();
-    for (let k of cacheMap.keys()) {
-      if (key === undefined || matchKey(k, key)) {
-        const entry = cacheMap.get(k);
-        entry[0] = 0; //force cache miss
-        revalidateSignals(entry[3], now); // retrigger live signals
-      }
-    }
+    cacheKeyOp(key, entry => {
+      force && (entry[0] = 0); //force cache miss
+      revalidateSignals(entry[3], now); // retrigger live signals
+    });
   });
 }
 
+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));
+  }
+}
 function revalidateSignals(set, time) {
   for (let s of set) s[1](time);
 }
@@ -825,7 +825,8 @@ function cache(fn, name, options) {
 
     // serialize on server
     if (isServer && sharedConfig.context && !sharedConfig.context.noHydrate) {
-      sharedConfig.context && sharedConfig.context.serialize(key, res);
+      const e = getRequestEvent();
+      (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
     }
     if (cached) {
       cached[0] = now;
@@ -868,6 +869,25 @@ function cache(fn, name, options) {
   cachedFn.key = name;
   return cachedFn;
 }
+cache.set = (key, value) => {
+  const cache = getCache();
+  const now = Date.now();
+  let cached = cache.get(key);
+  let version;
+  if (getOwner()) {
+    version = createSignal(now, {
+      equals: (p, v) => v - p < 50 // margin of error
+    });
+
+    onCleanup(() => cached[3].delete(version));
+  }
+  if (cached) {
+    cached[0] = now;
+    cached[1] = value;
+    cached[2] = "preload";
+    version && cached[3].add(version);
+  } else cache.set(key, cached = [now, value,, new Set(version ? [version] : [])]);
+};
 function matchKey(key, keys) {
   for (let k of keys) {
     if (key.startsWith(k)) return true;
@@ -947,7 +967,7 @@ function action(fn, name) {
     p.then(handler, handler);
     return p;
   }
-  const url = fn.url || name && `action:${name}` || (!isServer ? `action:${fn.name}` : "");
+  const url = fn.url || name && `action:${name}` || (!isServer ? `action:${hashString(fn.toString())}` : "");
   return toAction(mutate, url);
 }
 function toAction(fn, url) {
@@ -961,7 +981,7 @@ function toAction(fn, url) {
     };
     const uri = new URL(url, "http://sar");
     uri.searchParams.set("args", hashKey(args));
-    return toAction(newFn, uri.pathname + uri.search);
+    return toAction(newFn, (uri.protocol === "action:" ? uri.protocol : "") + uri.pathname + uri.search);
   };
   fn.url = url;
   if (!isServer) {
@@ -970,12 +990,15 @@ function toAction(fn, url) {
   }
   return fn;
 }
+const hashString = s => s.split("").reduce((a, b) => (a << 5) - a + b.charCodeAt(0) | 0, 0);
 async function handleResponse(response, navigate) {
   let data;
   let keys;
   if (response instanceof Response) {
     if (response.headers.has("X-Revalidate")) {
       keys = response.headers.get("X-Revalidate").split(",");
+      // invalidate
+      cacheKeyOp(keys, entry => entry[0] = 0);
     }
     if (response.customBody) data = await response.customBody();
     if (redirectStatusCodes.has(response.status)) {
@@ -987,102 +1010,110 @@ async function handleResponse(response, navigate) {
       }
     }
   } else data = response;
-  await revalidate(keys);
+  // trigger revalidation
+  await revalidate(keys, false);
   return data;
 }
 
-function setupNativeEvents(router) {
-  const basePath = router.base.path();
-  const navigateFromRoute = router.navigatorFactory(router.base);
-  let preloadTimeout = {};
-  function isSvg(el) {
-    return el.namespaceURI === "http://www.w3.org/2000/svg";
-  }
-  function handleAnchor(evt) {
-    if (evt.defaultPrevented || evt.button !== 0 || evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey) return;
-    const a = evt.composedPath().find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
-    if (!a) return;
-    const svg = isSvg(a);
-    const href = svg ? a.href.baseVal : a.href;
-    const target = svg ? a.target.baseVal : a.target;
-    if (target || !href && !a.hasAttribute("state")) return;
-    const rel = (a.getAttribute("rel") || "").split(/\s+/);
-    if (a.hasAttribute("download") || rel && rel.includes("external")) return;
-    const url = svg ? new URL(href, document.baseURI) : new URL(href);
-    if (url.origin !== window.location.origin || basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())) return;
-    return [a, url];
-  }
-  function handleAnchorClick(evt) {
-    const res = handleAnchor(evt);
-    if (!res) return;
-    const [a, url] = res;
-    const to = router.parsePath(url.pathname + url.search + url.hash);
-    const state = a.getAttribute("state");
-    evt.preventDefault();
-    navigateFromRoute(to, {
-      resolve: false,
-      replace: a.hasAttribute("replace"),
-      scroll: !a.hasAttribute("noscroll"),
-      state: state && JSON.parse(state)
-    });
-  }
-  function handleAnchorPreload(evt) {
-    const res = handleAnchor(evt);
-    if (!res) return;
-    const [a, url] = res;
-    if (!preloadTimeout[url.pathname]) router.preloadRoute(url, a.getAttribute("preload") !== "false");
-  }
-  function handleAnchorIn(evt) {
-    const res = handleAnchor(evt);
-    if (!res) return;
-    const [a, url] = res;
-    if (preloadTimeout[url.pathname]) return;
-    preloadTimeout[url.pathname] = setTimeout(() => {
-      router.preloadRoute(url, a.getAttribute("preload") !== "false");
-      delete preloadTimeout[url.pathname];
-    }, 200);
-  }
-  function handleAnchorOut(evt) {
-    const res = handleAnchor(evt);
-    if (!res) return;
-    const [, url] = res;
-    if (preloadTimeout[url.pathname]) {
-      clearTimeout(preloadTimeout[url.pathname]);
-      delete preloadTimeout[url.pathname];
+function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "/_server") {
+  return router => {
+    const basePath = router.base.path();
+    const navigateFromRoute = router.navigatorFactory(router.base);
+    let preloadTimeout = {};
+    function isSvg(el) {
+      return el.namespaceURI === "http://www.w3.org/2000/svg";
     }
-  }
-  function handleFormSubmit(evt) {
-    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);
-      actionRef = router.parsePath(url.pathname + url.search);
-      if (!actionRef.startsWith(router.actionBase)) return;
+    function handleAnchor(evt) {
+      if (evt.defaultPrevented || evt.button !== 0 || evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey) return;
+      const a = evt.composedPath().find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
+      if (!a || explicitLinks && !a.getAttribute("link")) return;
+      const svg = isSvg(a);
+      const href = svg ? a.href.baseVal : a.href;
+      const target = svg ? a.target.baseVal : a.target;
+      if (target || !href && !a.hasAttribute("state")) return;
+      const rel = (a.getAttribute("rel") || "").split(/\s+/);
+      if (a.hasAttribute("download") || rel && rel.includes("external")) return;
+      const url = svg ? new URL(href, document.baseURI) : new URL(href);
+      if (url.origin !== window.location.origin || basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())) return;
+      return [a, url];
     }
-    const handler = actions.get(actionRef);
-    if (handler) {
+    function handleAnchorClick(evt) {
+      const res = handleAnchor(evt);
+      if (!res) return;
+      const [a, url] = res;
+      const to = router.parsePath(url.pathname + url.search + url.hash);
+      const state = a.getAttribute("state");
       evt.preventDefault();
-      const data = new FormData(evt.target);
-      handler.call(router, data);
+      navigateFromRoute(to, {
+        resolve: false,
+        replace: a.hasAttribute("replace"),
+        scroll: !a.hasAttribute("noscroll"),
+        state: state && JSON.parse(state)
+      });
+    }
+    function handleAnchorPreload(evt) {
+      const res = handleAnchor(evt);
+      if (!res) return;
+      const [a, url] = res;
+      if (!preloadTimeout[url.pathname]) router.preloadRoute(url, a.getAttribute("preload") !== "false");
+    }
+    function handleAnchorIn(evt) {
+      const res = handleAnchor(evt);
+      if (!res) return;
+      const [a, url] = res;
+      if (preloadTimeout[url.pathname]) return;
+      preloadTimeout[url.pathname] = setTimeout(() => {
+        router.preloadRoute(url, a.getAttribute("preload") !== "false");
+        delete preloadTimeout[url.pathname];
+      }, 200);
+    }
+    function handleAnchorOut(evt) {
+      const res = handleAnchor(evt);
+      if (!res) return;
+      const [, url] = res;
+      if (preloadTimeout[url.pathname]) {
+        clearTimeout(preloadTimeout[url.pathname]);
+        delete preloadTimeout[url.pathname];
+      }
+    }
+    function handleFormSubmit(evt) {
+      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);
+        actionRef = router.parsePath(url.pathname + url.search);
+        if (!actionRef.startsWith(actionBase)) return;
+      }
+      if (evt.target.method.toUpperCase() !== "POST") throw new Error("Only POST forms are supported for Actions");
+      const handler = actions.get(actionRef);
+      if (handler) {
+        evt.preventDefault();
+        const data = new FormData(evt.target);
+        handler.call(router, data);
+      }
     }
-  }
 
-  // ensure delegated event run first
-  delegateEvents(["click", "submit"]);
-  document.addEventListener("click", handleAnchorClick);
-  document.addEventListener("mouseover", handleAnchorIn);
-  document.addEventListener("mouseout", handleAnchorOut);
-  document.addEventListener("focusin", handleAnchorPreload);
-  document.addEventListener("touchstart", handleAnchorPreload);
-  document.addEventListener("submit", handleFormSubmit);
-  onCleanup(() => {
-    document.removeEventListener("click", handleAnchorClick);
-    document.removeEventListener("mouseover", handleAnchorIn);
-    document.removeEventListener("mouseout", handleAnchorOut);
-    document.removeEventListener("focusin", handleAnchorPreload);
-    document.removeEventListener("touchstart", handleAnchorPreload);
-    document.removeEventListener("submit", handleFormSubmit);
-  });
+    // ensure delegated event run first
+    delegateEvents(["click", "submit"]);
+    document.addEventListener("click", handleAnchorClick);
+    if (preload) {
+      document.addEventListener("mouseover", handleAnchorIn);
+      document.addEventListener("mouseout", handleAnchorOut);
+      document.addEventListener("focusin", handleAnchorPreload);
+      document.addEventListener("touchstart", handleAnchorPreload);
+    }
+    document.addEventListener("submit", handleFormSubmit);
+    onCleanup(() => {
+      document.removeEventListener("click", handleAnchorClick);
+      if (preload) {
+        document.removeEventListener("mouseover", handleAnchorIn);
+        document.removeEventListener("mouseout", handleAnchorOut);
+        document.removeEventListener("focusin", handleAnchorPreload);
+        document.removeEventListener("touchstart", handleAnchorPreload);
+      }
+      document.removeEventListener("submit", handleFormSubmit);
+    });
+  };
 }
 
 function Router(props) {
@@ -1106,7 +1137,7 @@ function Router(props) {
       scrollToHash(window.location.hash.slice(1), scroll);
     },
     init: notify => bindEvent(window, "popstate", () => notify()),
-    create: setupNativeEvents,
+    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
     utils: {
       go: delta => window.history.go(delta)
     }
@@ -1143,7 +1174,7 @@ function HashRouter(props) {
       scrollToHash(hash, scroll);
     },
     init: notify => bindEvent(window, "hashchange", () => notify()),
-    create: setupNativeEvents,
+    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
     utils: {
       go: delta => window.history.go(delta),
       renderPath: path => `#${path}`,
@@ -1243,6 +1274,7 @@ function A(props) {
           ...rest.classList
         };
       },
+      "link": "",
       get ["aria-current"]() {
         return isActive() ? "page" : undefined;
       }

package/dist/routers/HashRouter.d.ts

@@ -1,5 +1,9 @@
 import type { JSX } from "solid-js";
 import type { BaseRouterProps } from "./components";
 export declare function hashParser(str: string): string;
-export type HashRouterProps = BaseRouterProps;
+export type HashRouterProps = BaseRouterProps & {
+    actionBase?: string;
+    explicitLinks?: boolean;
+    preload?: boolean;
+};
 export declare function HashRouter(props: HashRouterProps): JSX.Element;

package/dist/routers/HashRouter.js

@@ -26,7 +26,7 @@ export function HashRouter(props) {
             scrollToHash(hash, scroll);
         },
         init: notify => bindEvent(window, "hashchange", () => notify()),
-        create: setupNativeEvents,
+        create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
         utils: {
             go: delta => window.history.go(delta),
             renderPath: path => `#${path}`,

package/dist/routers/Router.d.ts

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

package/dist/routers/Router.js

@@ -20,7 +20,7 @@ export function Router(props) {
             scrollToHash(window.location.hash.slice(1), scroll);
         },
         init: notify => bindEvent(window, "popstate", () => notify()),
-        create: setupNativeEvents,
+        create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
         utils: {
             go: delta => window.history.go(delta)
         }

package/dist/routers/components.d.ts

@@ -2,7 +2,6 @@ import type { Component, JSX } from "solid-js";
 import type { MatchFilters, RouteLoadFunc, RouterIntegration, RouteSectionProps } from "../types";
 export type BaseRouterProps = {
     base?: string;
-    actionBase?: string;
     root?: Component<RouteSectionProps>;
     children?: JSX.Element;
 };

package/dist/routers/components.jsx

@@ -3,10 +3,10 @@ import { children, createMemo, createRoot, mergeProps, on, Show } from "solid-js
 import { createBranches, createRouteContext, createRouterContext, getRouteMatches, RouteContextObj, RouterContextObj } from "../routing";
 import { createMemoObject } from "../utils";
 export const createRouterComponent = (router) => (props) => {
-    const { base, actionBase } = props;
+    const { base } = props;
     const routeDefs = children(() => props.children);
     const branches = createMemo(() => createBranches(props.root ? { component: props.root, children: routeDefs() } : routeDefs(), props.base || ""));
-    const routerState = createRouterContext(router, branches, { base, actionBase });
+    const routerState = createRouterContext(router, branches, { base });
     router.create && router.create(routerState);
     return (<RouterContextObj.Provider value={routerState}>
       <Routes routerState={routerState} branches={branches()}/>

package/dist/routing.d.ts

@@ -21,6 +21,5 @@ export declare function createLocation(path: Accessor<string>, state: Accessor<a
 export declare function getIntent(): Intent | undefined;
 export declare function createRouterContext(integration: RouterIntegration, getBranches?: () => Branch[], options?: {
     base?: string;
-    actionBase?: string;
 }): RouterContext;
 export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch, params: Params): RouteContext;

package/dist/routing.js

@@ -231,7 +231,6 @@ export function createRouterContext(integration, getBranches, options = {}) {
     });
     return {
         base: baseRoute,
-        actionBase: options.actionBase || "/_server",
         location,
         isRouting,
         renderPath,

package/dist/types.d.ts

@@ -4,6 +4,7 @@ declare module "solid-js/web" {
         response?: Response;
         routerCache?: Map<any, any>;
         initialSubmission?: Submission<any, any>;
+        serverOnly?: boolean;
     }
 }
 export type Params = Record<string, string>;
@@ -118,7 +119,6 @@ export interface RouterOutput {
 }
 export interface RouterContext {
     base: RouteContext;
-    actionBase: string;
     location: Location;
     navigatorFactory: NavigatorFactory;
     isRouting: () => boolean;

package/package.json

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