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

package/dist/index.js

@@ -1,174 +1,7 @@
-import { isServer, delegateEvents, getRequestEvent, createComponent as createComponent$1, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
-import { createSignal, onCleanup, getOwner, runWithOwner, createMemo, createContext, useContext, untrack, createRenderEffect, on, startTransition, resetErrorBoundaries, createComponent, children, createRoot, Show, mergeProps, splitProps, createResource, sharedConfig, $TRACK } from 'solid-js';
+import { isServer, getRequestEvent, createComponent as createComponent$1, delegateEvents, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, createRenderEffect, on, startTransition, resetErrorBoundaries, createComponent, children, mergeProps, createRoot, Show, sharedConfig, $TRACK, splitProps, createResource } from 'solid-js';
 import { createStore, reconcile } from 'solid-js/store';
 
-function bindEvent(target, type, handler) {
-  target.addEventListener(type, handler);
-  return () => target.removeEventListener(type, handler);
-}
-function intercept([value, setValue], get, set) {
-  return [get ? () => get(value()) : value, set ? v => setValue(set(v)) : setValue];
-}
-function querySelector(selector) {
-  if (selector === "#") {
-    return null;
-  }
-  // Guard against selector being an invalid CSS selector
-  try {
-    return document.querySelector(selector);
-  } catch (e) {
-    return null;
-  }
-}
-function scrollToHash(hash, fallbackTop) {
-  const el = querySelector(`#${hash}`);
-  if (el) {
-    el.scrollIntoView();
-  } else if (fallbackTop) {
-    window.scrollTo(0, 0);
-  }
-}
-function createMemoryHistory() {
-  const entries = ["/"];
-  let index = 0;
-  const listeners = [];
-  const go = n => {
-    // https://github.com/remix-run/react-router/blob/682810ca929d0e3c64a76f8d6e465196b7a2ac58/packages/router/history.ts#L245
-    index = Math.max(0, Math.min(index + n, entries.length - 1));
-    const value = entries[index];
-    listeners.forEach(listener => listener(value));
-  };
-  return {
-    get: () => entries[index],
-    set: ({
-      value,
-      scroll,
-      replace
-    }) => {
-      if (replace) {
-        entries[index] = value;
-      } else {
-        entries.splice(index + 1, entries.length - index, value);
-        index++;
-      }
-      if (scroll) {
-        scrollToHash(value.split("#")[1] || "", true);
-      }
-    },
-    back: () => {
-      go(-1);
-    },
-    forward: () => {
-      go(1);
-    },
-    go,
-    listen: listener => {
-      listeners.push(listener);
-      return () => {
-        const index = listeners.indexOf(listener);
-        listeners.splice(index, 1);
-      };
-    }
-  };
-}
-function createIntegration(get, set, init, utils) {
-  let ignore = false;
-  const wrap = value => typeof value === "string" ? {
-    value
-  } : value;
-  const signal = intercept(createSignal(wrap(get()), {
-    equals: (a, b) => a.value === b.value
-  }), undefined, next => {
-    !ignore && set(next);
-    return next;
-  });
-  init && onCleanup(init((value = get()) => {
-    ignore = true;
-    signal[1](wrap(value));
-    ignore = false;
-  }));
-  return {
-    signal,
-    utils
-  };
-}
-function normalizeIntegration(integration) {
-  if (!integration) {
-    return {
-      signal: createSignal({
-        value: ""
-      })
-    };
-  } else if (Array.isArray(integration)) {
-    return {
-      signal: integration
-    };
-  }
-  return integration;
-}
-function staticIntegration(obj) {
-  return {
-    signal: [() => obj, next => Object.assign(obj, next)]
-  };
-}
-function pathIntegration() {
-  return createIntegration(() => ({
-    value: window.location.pathname + window.location.search + window.location.hash,
-    state: history.state
-  }), ({
-    value,
-    replace,
-    scroll,
-    state
-  }) => {
-    if (replace) {
-      window.history.replaceState(state, "", value);
-    } else {
-      window.history.pushState(state, "", value);
-    }
-    scrollToHash(window.location.hash.slice(1), scroll);
-  }, notify => bindEvent(window, "popstate", () => notify()), {
-    go: delta => window.history.go(delta)
-  });
-}
-function hashIntegration() {
-  return createIntegration(() => window.location.hash.slice(1), ({
-    value,
-    replace,
-    scroll,
-    state
-  }) => {
-    if (replace) {
-      window.history.replaceState(state, "", "#" + value);
-    } else {
-      window.location.hash = value;
-    }
-    const hashIndex = value.indexOf("#");
-    const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";
-    scrollToHash(hash, scroll);
-  }, notify => bindEvent(window, "hashchange", () => notify()), {
-    go: delta => window.history.go(delta),
-    renderPath: path => `#${path}`,
-    parsePath: str => {
-      const to = str.replace(/^.*?#/, "");
-      // Hash-only hrefs like `#foo` from plain anchors will come in as `/#foo` whereas a link to
-      // `/foo` will be `/#/foo`. Check if the to starts with a `/` and if not append it as a hash
-      // to the current path so we can handle these in-page anchors correctly.
-      if (!to.startsWith("/")) {
-        const [, path = "/"] = window.location.hash.split("#", 2);
-        return `${path}#${to}`;
-      }
-      return to;
-    }
-  });
-}
-function memoryIntegration() {
-  const memoryHistory = createMemoryHistory();
-  return createIntegration(memoryHistory.get, memoryHistory.set, memoryHistory.listen, {
-    go: memoryHistory.go
-  });
-}
-
 function createBeforeLeave() {
   let listeners = new Set();
   function subscribe(listener) {
@@ -521,10 +354,6 @@ function createLocation(path, state) {
     query: createMemoObject(on(search, () => extractSearchParams(url())))
   };
 }
-const actions = new Map();
-function registerAction(url, fn) {
-  actions.set(url, fn);
-}
 let intent;
 function getIntent() {
   return intent;
@@ -533,12 +362,11 @@ function createRouterContext(integration, getBranches, options = {}) {
   const {
     signal: [source, setSource],
     utils = {}
-  } = normalizeIntegration(integration);
+  } = integration;
   const parsePath = utils.parsePath || (p => p);
   const renderPath = utils.renderPath || (p => p);
   const beforeLeave = utils.beforeLeave || createBeforeLeave();
   const basePath = resolvePath("", options.base || "");
-  const actionBase = options.actionBase || "/_server";
   if (basePath === undefined) {
     throw new Error(`${basePath} is not a valid base path`);
   } else if (basePath && !source().value) {
@@ -561,6 +389,7 @@ function createRouterContext(integration, getBranches, options = {}) {
   const [state, setState] = createSignal(source().state);
   const location = createLocation(reference, state);
   const referrers = [];
+  const submissions = createSignal(initFromFlash(location.query));
   const baseRoute = {
     pattern: basePath,
     params: {},
@@ -570,15 +399,37 @@ function createRouterContext(integration, getBranches, options = {}) {
       return resolvePath(basePath, to);
     }
   };
-  const router = {
+  createRenderEffect(() => {
+    const {
+      value,
+      state
+    } = source();
+    // Untrack this whole block so `start` doesn't cause Solid's Listener to be preserved
+    untrack(() => {
+      if (value !== reference()) {
+        start(() => {
+          intent = "native";
+          setReference(value);
+          setState(state);
+          resetErrorBoundaries();
+          submissions[1]([]);
+        }).then(() => {
+          intent = undefined;
+        });
+      }
+    });
+  });
+  return {
     base: baseRoute,
+    actionBase: options.actionBase || "/_server",
     location,
     isRouting,
     renderPath,
     parsePath,
     navigatorFactory,
     beforeLeave,
-    submissions: createSignal(initFromFlash(location.query))
+    preloadRoute,
+    submissions
   };
   function navigateFromRoute(route, to, options) {
     // Untrack in case someone navigates in an effect - don't want to track `reference` or route paths
@@ -636,6 +487,7 @@ function createRouterContext(integration, getBranches, options = {}) {
             setReference(resolvedTo);
             setState(nextState);
             resetErrorBoundaries();
+            submissions[1]([]);
           }).then(() => {
             if (referrers.length === len) {
               intent = undefined;
@@ -667,152 +519,41 @@ function createRouterContext(integration, getBranches, options = {}) {
       referrers.length = 0;
     }
   }
+  function preloadRoute(url, preloadData) {
+    const matches = getRouteMatches(getBranches(), url.pathname);
+    const prevIntent = intent;
+    intent = "preload";
+    for (let match in matches) {
+      const {
+        route,
+        params
+      } = matches[match];
+      route.component && route.component.preload && route.component.preload();
+      preloadData && route.load && route.load({
+        params,
+        location: {
+          pathname: url.pathname,
+          search: url.search,
+          hash: url.hash,
+          query: extractSearchParams(url),
+          state: null,
+          key: ""
+        },
+        intent: "preload"
+      });
+    }
+    intent = prevIntent;
+  }
   function initFromFlash(params) {
     let param = params.form ? JSON.parse(params.form) : null;
     if (!param || !param.result) return [];
     const input = new Map(param.entries);
     return [{
       url: param.url,
-      result: param.error ? new Error(param.result.message) : param.result,
+      result: param.error ? new Error(param.result) : param.result,
       input: input
     }];
   }
-  createRenderEffect(() => {
-    const {
-      value,
-      state
-    } = source();
-    // Untrack this whole block so `start` doesn't cause Solid's Listener to be preserved
-    untrack(() => {
-      if (value !== reference()) {
-        start(() => {
-          intent = "native";
-          setReference(value);
-          setState(state);
-        }).then(() => {
-          intent = undefined;
-        });
-      }
-    });
-  });
-  if (!isServer) {
-    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 = parsePath(url.pathname + url.search + url.hash);
-      const state = a.getAttribute("state");
-      evt.preventDefault();
-      navigateFromRoute(baseRoute, to, {
-        resolve: false,
-        replace: a.hasAttribute("replace"),
-        scroll: !a.hasAttribute("noscroll"),
-        state: state && JSON.parse(state)
-      });
-    }
-    function doPreload(a, url) {
-      const preload = a.getAttribute("preload") !== "false";
-      const matches = getRouteMatches(getBranches(), url.pathname);
-      const prevIntent = intent;
-      intent = "preload";
-      for (let match in matches) {
-        const {
-          route,
-          params
-        } = matches[match];
-        route.component && route.component.preload && route.component.preload();
-        preload && route.load && route.load({
-          params,
-          location: {
-            pathname: url.pathname,
-            search: url.search,
-            hash: url.hash,
-            query: extractSearchParams(url),
-            state: null,
-            key: ""
-          },
-          intent
-        });
-      }
-      intent = prevIntent;
-    }
-    function handleAnchorPreload(evt) {
-      const res = handleAnchor(evt);
-      if (!res) return;
-      const [a, url] = res;
-      if (!preloadTimeout[url.pathname]) doPreload(a, url);
-    }
-    function handleAnchorIn(evt) {
-      const res = handleAnchor(evt);
-      if (!res) return;
-      const [a, url] = res;
-      if (preloadTimeout[url.pathname]) return;
-      preloadTimeout[url.pathname] = setTimeout(() => {
-        doPreload(a, url);
-        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.getAttribute("formaction") || evt.target.action;
-      if (!actionRef) return;
-      if (!actionRef.startsWith("action:")) {
-        const url = new URL(actionRef);
-        actionRef = parsePath(url.pathname + url.search);
-        if (!actionRef.startsWith(actionBase)) return;
-      }
-      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);
-    });
-  }
-  return router;
 }
 function createRouteContext(router, parent, outlet, match, params) {
   const {
@@ -845,32 +586,26 @@ function createRouteContext(router, parent, outlet, match, params) {
   load && load({
     params,
     location,
-    intent: intent || "navigate"
+    intent: intent || "initial"
   });
   return route;
 }
 
-const _tmpl$ = /*#__PURE__*/template(`<a>`);
-const Router = props => {
-  let e;
+const createRouterComponent = router => props => {
   const {
-    source,
-    url,
     base,
     actionBase
   } = props;
-  const integration = source || (isServer ? staticIntegration({
-    value: url || (e = getRequestEvent()) && getPath(e.request.url) || ""
-  }) : pathIntegration());
   const routeDefs = children(() => props.children);
   const branches = createMemo(() => createBranches(props.root ? {
     component: props.root,
     children: routeDefs()
   } : routeDefs(), props.base || ""));
-  const routerState = createRouterContext(integration, branches, {
+  const routerState = createRouterContext(router, branches, {
     base,
     actionBase
   });
+  router.create && router.create(routerState);
   return createComponent$1(RouterContextObj.Provider, {
     value: routerState,
     get children() {
@@ -883,10 +618,6 @@ const Router = props => {
     }
   });
 };
-function getPath(url) {
-  const u = new URL(url);
-  return u.pathname + u.search;
-}
 function Routes(props) {
   const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
   const params = createMemoObject(() => {
@@ -960,150 +691,117 @@ const Route = props => {
     }
   });
 };
-function A(props) {
-  props = mergeProps({
-    inactiveClass: "inactive",
-    activeClass: "active"
-  }, props);
-  const [, rest] = splitProps(props, ["href", "state", "class", "activeClass", "inactiveClass", "end"]);
-  const to = useResolvedPath(() => props.href);
-  const href = useHref(to);
-  const location = useLocation();
-  const isActive = createMemo(() => {
-    const to_ = to();
-    if (to_ === undefined) return false;
-    const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
-    const loc = normalizePath(location.pathname).toLowerCase();
-    return props.end ? path === loc : loc.startsWith(path);
-  });
-  return (() => {
-    const _el$ = _tmpl$();
-    spread(_el$, mergeProps$1(rest, {
-      get href() {
-        return href() || props.href;
-      },
-      get state() {
-        return JSON.stringify(props.state);
-      },
-      get classList() {
-        return {
-          ...(props.class && {
-            [props.class]: true
-          }),
-          [props.inactiveClass]: !isActive(),
-          [props.activeClass]: isActive(),
-          ...rest.classList
-        };
-      },
-      get ["aria-current"]() {
-        return isActive() ? "page" : undefined;
-      }
-    }), false, false);
-    return _el$;
-  })();
-}
-function Navigate(props) {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const {
-    href,
-    state
-  } = props;
-  const path = typeof href === "function" ? href({
-    navigate,
-    location
-  }) : href;
-  navigate(path, {
-    replace: true,
-    state
-  });
-  return null;
-}
 
-/**
- * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
- */
-function createAsync(fn, options) {
-  const [resource] = createResource(() => subFetch(fn), v => v, options);
-  return () => resource();
+function intercept([value, setValue], get, set) {
+  return [get ? () => get(value()) : value, set ? v => setValue(set(v)) : setValue];
 }
-
-// mock promise while hydrating to prevent fetching
-class MockPromise {
-  static all() {
-    return new MockPromise();
+function querySelector(selector) {
+  if (selector === "#") {
+    return null;
   }
-  static allSettled() {
-    return new MockPromise();
-  }
-  static any() {
-    return new MockPromise();
-  }
-  static race() {
-    return new MockPromise();
-  }
-  static reject() {
-    return new MockPromise();
-  }
-  static resolve() {
-    return new MockPromise();
-  }
-  catch() {
-    return new MockPromise();
-  }
-  then() {
-    return new MockPromise();
-  }
-  finally() {
-    return new MockPromise();
+  // Guard against selector being an invalid CSS selector
+  try {
+    return document.querySelector(selector);
+  } catch (e) {
+    return null;
   }
 }
-function subFetch(fn) {
-  if (isServer || !sharedConfig.context) return fn();
-  const ogFetch = fetch;
-  const ogPromise = Promise;
-  try {
-    window.fetch = () => new MockPromise();
-    Promise = MockPromise;
-    return fn();
-  } finally {
-    window.fetch = ogFetch;
-    Promise = ogPromise;
+function createRouter(config) {
+  let ignore = false;
+  const wrap = value => typeof value === "string" ? {
+    value
+  } : value;
+  const signal = intercept(createSignal(wrap(config.get()), {
+    equals: (a, b) => a.value === b.value
+  }), undefined, next => {
+    !ignore && config.set(next);
+    return next;
+  });
+  config.init && onCleanup(config.init((value = config.get()) => {
+    ignore = true;
+    signal[1](wrap(value));
+    ignore = false;
+  }));
+  return createRouterComponent({
+    signal,
+    create: config.create,
+    utils: config.utils
+  });
+}
+function bindEvent(target, type, handler) {
+  target.addEventListener(type, handler);
+  return () => target.removeEventListener(type, handler);
+}
+function scrollToHash(hash, fallbackTop) {
+  const el = querySelector(`#${hash}`);
+  if (el) {
+    el.scrollIntoView();
+  } else if (fallbackTop) {
+    window.scrollTo(0, 0);
   }
 }
 
+function getPath(url) {
+  const u = new URL(url);
+  return u.pathname + u.search;
+}
+function StaticRouter(props) {
+  let e;
+  const obj = {
+    value: props.url || (e = getRequestEvent()) && getPath(e.request.url) || ""
+  };
+  return createRouterComponent({
+    signal: [() => obj, next => Object.assign(obj, next)]
+  })(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) {
@@ -1172,8 +870,31 @@ 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();
 function useSubmissions(fn, filter) {
   const router = useRouter();
   const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.toString() && (!filter || filter(s.input))));
@@ -1187,26 +908,11 @@ function useSubmissions(fn, filter) {
 }
 function useSubmission(fn, filter) {
   const submissions = useSubmissions(fn, filter);
-  return {
-    get clear() {
-      return submissions[submissions.length - 1]?.clear;
-    },
-    get retry() {
-      return submissions[submissions.length - 1]?.retry;
-    },
-    get url() {
-      return submissions[submissions.length - 1]?.url;
-    },
-    get input() {
-      return submissions[submissions.length - 1]?.input;
-    },
-    get result() {
-      return submissions[submissions.length - 1]?.result;
-    },
-    get pending() {
-      return submissions[submissions.length - 1]?.pending;
+  return new Proxy({}, {
+    get(_, property) {
+      return submissions[submissions.length - 1]?.[property];
     }
-  };
+  });
 }
 function useAction(action) {
   const router = useRouter();
@@ -1252,35 +958,378 @@ function action(fn, name) {
     if (!url) throw new Error("Client Actions need explicit names if server rendered");
     return url;
   };
-  if (!isServer) registerAction(url, mutate);
+  if (!isServer) actions.set(url, mutate);
   return mutate;
 }
 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;
 }
 
+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 handleFormSubmit(evt) {
+    let actionRef = evt.submitter && evt.submitter.getAttribute("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;
+    }
+    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);
+  });
+}
+
+function Router(props) {
+  if (isServer) return StaticRouter(props);
+  return createRouter({
+    get: () => ({
+      value: window.location.pathname + window.location.search + window.location.hash,
+      state: history.state
+    }),
+    set({
+      value,
+      replace,
+      scroll,
+      state
+    }) {
+      if (replace) {
+        window.history.replaceState(state, "", value);
+      } else {
+        window.history.pushState(state, "", value);
+      }
+      scrollToHash(window.location.hash.slice(1), scroll);
+    },
+    init: notify => bindEvent(window, "popstate", () => notify()),
+    create: setupNativeEvents,
+    utils: {
+      go: delta => window.history.go(delta)
+    }
+  })(props);
+}
+
+function hashParser(str) {
+  const to = str.replace(/^.*?#/, "");
+  // Hash-only hrefs like `#foo` from plain anchors will come in as `/#foo` whereas a link to
+  // `/foo` will be `/#/foo`. Check if the to starts with a `/` and if not append it as a hash
+  // to the current path so we can handle these in-page anchors correctly.
+  if (!to.startsWith("/")) {
+    const [, path = "/"] = window.location.hash.split("#", 2);
+    return `${path}#${to}`;
+  }
+  return to;
+}
+function HashRouter(props) {
+  return createRouter({
+    get: () => window.location.hash.slice(1),
+    set({
+      value,
+      replace,
+      scroll,
+      state
+    }) {
+      if (replace) {
+        window.history.replaceState(state, "", "#" + value);
+      } else {
+        window.location.hash = value;
+      }
+      const hashIndex = value.indexOf("#");
+      const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";
+      scrollToHash(hash, scroll);
+    },
+    init: notify => bindEvent(window, "hashchange", () => notify()),
+    create: setupNativeEvents,
+    utils: {
+      go: delta => window.history.go(delta),
+      renderPath: path => `#${path}`,
+      parsePath: hashParser
+    }
+  })(props);
+}
+
+function createMemoryHistory() {
+  const entries = ["/"];
+  let index = 0;
+  const listeners = [];
+  const go = n => {
+    // https://github.com/remix-run/react-router/blob/682810ca929d0e3c64a76f8d6e465196b7a2ac58/packages/router/history.ts#L245
+    index = Math.max(0, Math.min(index + n, entries.length - 1));
+    const value = entries[index];
+    listeners.forEach(listener => listener(value));
+  };
+  return {
+    get: () => entries[index],
+    set: ({
+      value,
+      scroll,
+      replace
+    }) => {
+      if (replace) {
+        entries[index] = value;
+      } else {
+        entries.splice(index + 1, entries.length - index, value);
+        index++;
+      }
+      if (scroll) {
+        scrollToHash(value.split("#")[1] || "", true);
+      }
+    },
+    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: memoryHistory.go
+    }
+  })(props);
+}
+
+const _tmpl$ = /*#__PURE__*/template(`<a>`);
+function A(props) {
+  props = mergeProps({
+    inactiveClass: "inactive",
+    activeClass: "active"
+  }, props);
+  const [, rest] = splitProps(props, ["href", "state", "class", "activeClass", "inactiveClass", "end"]);
+  const to = useResolvedPath(() => props.href);
+  const href = useHref(to);
+  const location = useLocation();
+  const isActive = createMemo(() => {
+    const to_ = to();
+    if (to_ === undefined) return false;
+    const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
+    const loc = normalizePath(location.pathname).toLowerCase();
+    return props.end ? path === loc : loc.startsWith(path);
+  });
+  return (() => {
+    const _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(rest, {
+      get href() {
+        return href() || props.href;
+      },
+      get state() {
+        return JSON.stringify(props.state);
+      },
+      get classList() {
+        return {
+          ...(props.class && {
+            [props.class]: true
+          }),
+          [props.inactiveClass]: !isActive(),
+          [props.activeClass]: isActive(),
+          ...rest.classList
+        };
+      },
+      get ["aria-current"]() {
+        return isActive() ? "page" : undefined;
+      }
+    }), false, false);
+    return _el$;
+  })();
+}
+function Navigate(props) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const {
+    href,
+    state
+  } = props;
+  const path = typeof href === "function" ? href({
+    navigate,
+    location
+  }) : href;
+  navigate(path, {
+    replace: true,
+    state
+  });
+  return null;
+}
+
+/**
+ * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
+ */
+function createAsync(fn, options) {
+  const [resource] = createResource(() => subFetch(fn), v => v, options);
+  return () => resource();
+}
+
+// mock promise while hydrating to prevent fetching
+class MockPromise {
+  static all() {
+    return new MockPromise();
+  }
+  static allSettled() {
+    return new MockPromise();
+  }
+  static any() {
+    return new MockPromise();
+  }
+  static race() {
+    return new MockPromise();
+  }
+  static reject() {
+    return new MockPromise();
+  }
+  static resolve() {
+    return new MockPromise();
+  }
+  catch() {
+    return new MockPromise();
+  }
+  then() {
+    return new MockPromise();
+  }
+  finally() {
+    return new MockPromise();
+  }
+}
+function subFetch(fn) {
+  if (isServer || !sharedConfig.context) return fn();
+  const ogFetch = fetch;
+  const ogPromise = Promise;
+  try {
+    window.fetch = () => new MockPromise();
+    Promise = MockPromise;
+    return fn();
+  } finally {
+    window.fetch = ogFetch;
+    Promise = ogPromise;
+  }
+}
+
 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
@@ -1288,4 +1337,4 @@ function redirect(url, init = 302) {
   return response;
 }
 
-export { A, A as Link, A as NavLink, Navigate, Route, Router, mergeSearchString as _mergeSearchString, action, cache, createAsync, createBeforeLeave, createIntegration, createMemoryHistory, hashIntegration, memoryIntegration, normalizeIntegration, pathIntegration, redirect, revalidate, staticIntegration, 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 };