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

package/README.md

@@ -368,6 +368,14 @@ 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.
 
+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]"
+```
+
 This cache can be defined anywhere and then used inside your components with:
 
 ### `createAsync`
@@ -378,6 +386,8 @@ 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).
@@ -391,12 +401,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.
 
@@ -571,9 +607,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 comoponent |
+| 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.
 
@@ -729,9 +778,9 @@ 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.
 
@@ -745,7 +794,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

@@ -80,7 +80,7 @@ function toAction(fn, url) {
         };
         const uri = new URL(url, "http://sar");
         uri.searchParams.set("args", hashKey(args));
-        return toAction(newFn, uri.toString());
+        return toAction(newFn, uri.pathname + uri.search);
     };
     fn.url = url;
     if (!isServer) {

package/dist/data/cache.d.ts

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

package/dist/data/cache.js

@@ -22,6 +22,8 @@ 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) {
@@ -78,8 +80,9 @@ export function cache(fn, name, options) {
             ? sharedConfig.load(key) // hydrating
             : fn(...args);
         // serialize on server
-        if (isServer && sharedConfig.context && !sharedConfig.context.noHydrate) {
-            sharedConfig.context && sharedConfig.context.serialize(key, res);
+        if (isServer && (sharedConfig.context && !sharedConfig.context.noHydrate)) {
+            const e = getRequestEvent();
+            (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
         }
         if (cached) {
             cached[0] = now;
@@ -130,6 +133,27 @@ 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,6 +765,7 @@ 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) {
@@ -825,7 +823,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 +867,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;
@@ -961,7 +979,7 @@ function toAction(fn, url) {
     };
     const uri = new URL(url, "http://sar");
     uri.searchParams.set("args", hashKey(args));
-    return toAction(newFn, uri.toString());
+    return toAction(newFn, uri.pathname + uri.search);
   };
   fn.url = url;
   if (!isServer) {
@@ -991,98 +1009,105 @@ async function handleResponse(response, navigate) {
   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 +1131,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 +1168,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 +1268,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.7",
+  "version": "0.10.0-beta.9",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",