@solidjs/router 0.9.0 → 0.10.0-beta.0

package/dist/index.js

@@ -1,5 +1,6 @@
 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, createComponent, on, startTransition, resetErrorBoundaries, children, createRoot, Show, mergeProps, splitProps } from 'solid-js';
+import { createSignal, onCleanup, getOwner, runWithOwner, createMemo, createContext, useContext, untrack, createRenderEffect, on, startTransition, createComponent, resetErrorBoundaries, children, createRoot, Show, mergeProps, splitProps, createResource, sharedConfig, $TRACK } from 'solid-js';
+import { createStore, reconcile } from 'solid-js/store';
 
 function bindEvent(target, type, handler) {
   target.addEventListener(type, handler);
@@ -201,6 +202,7 @@ function createBeforeLeave() {
 
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
 const trimPathRegex = /^\/+|(\/)\/+$/g;
+const redirectStatusCodes = new Set([204, 301, 302, 303, 307, 308]);
 function normalizePath(path, omitSlash = false) {
   const s = path.replace(trimPathRegex, "$1");
   return s ? omitSlash || /^[?#]/.test(s) ? s : "/" + s : "";
@@ -353,8 +355,7 @@ const MAX_REDIRECTS = 100;
 const RouterContextObj = createContext();
 const RouteContextObj = createContext();
 const useRouter = () => invariant(useContext(RouterContextObj), "Make sure your app is wrapped in a <Router />");
-let TempRoute;
-const useRoute = () => TempRoute || useContext(RouteContextObj) || useRouter().base;
+const useRoute = () => useContext(RouteContextObj) || useRouter().base;
 const useResolvedPath = path => {
   const route = useRoute();
   return createMemo(() => route.resolvePath(path()));
@@ -380,7 +381,6 @@ const useMatch = (path, matchFilters) => {
   });
 };
 const useParams = () => useRoute().params;
-const useRouteData = () => useRoute().data;
 const useSearchParams = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -402,23 +402,17 @@ const useBeforeLeave = listener => {
   });
   onCleanup(s);
 };
-function createRoutes(routeDef, base = "", fallback) {
+function createRoutes(routeDef, base = "") {
   const {
     component,
-    data,
+    load,
     children
   } = routeDef;
   const isLeaf = !children || Array.isArray(children) && !children.length;
   const shared = {
     key: routeDef,
-    element: component ? () => createComponent(component, {}) : () => {
-      const {
-        element
-      } = routeDef;
-      return element === undefined && fallback ? createComponent(fallback, {}) : element;
-    },
-    preload: routeDef.component ? component.preload : routeDef.preload,
-    data
+    component,
+    load
   };
   return asArray(routeDef.path).reduce((acc, path) => {
     for (const originalPath of expandOptionals(path)) {
@@ -458,17 +452,18 @@ function createBranch(routes, index = 0) {
 function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
-function createBranches(routeDef, base = "", fallback, stack = [], branches = []) {
+function createBranches(routeDef, base = "", stack = [], branches = []) {
   const routeDefs = asArray(routeDef);
   for (let i = 0, len = routeDefs.length; i < len; i++) {
     const def = routeDefs[i];
-    if (def && typeof def === "object" && def.hasOwnProperty("path")) {
-      const routes = createRoutes(def, base, fallback);
+    if (def && typeof def === "object") {
+      if (!def.hasOwnProperty("path")) def.path = "";
+      const routes = createRoutes(def, base);
       for (const route of routes) {
         stack.push(route);
         const isEmptyArray = Array.isArray(def.children) && def.children.length === 0;
         if (def.children && !isEmptyArray) {
-          createBranches(def.children, route.pattern, fallback, stack, branches);
+          createBranches(def.children, route.pattern, stack, branches);
         } else {
           const branch = createBranch([...stack], branches.length);
           branches.push(branch);
@@ -526,7 +521,15 @@ function createLocation(path, state) {
     query: createMemoObject(on(search, () => extractSearchParams(url())))
   };
 }
-function createRouterContext(integration, base = "", data, out) {
+const actions = new Map();
+function registerAction(url, fn) {
+  actions.set(url, fn);
+}
+let intent;
+function getIntent() {
+  return intent;
+}
+function createRouterContext(integration, getBranches, base = "") {
   const {
     signal: [source, setSource],
     utils = {}
@@ -534,11 +537,8 @@ function createRouterContext(integration, base = "", data, out) {
   const parsePath = utils.parsePath || (p => p);
   const renderPath = utils.renderPath || (p => p);
   const beforeLeave = utils.beforeLeave || createBeforeLeave();
+  let submissions = [];
   const basePath = resolvePath("", base);
-  const output = isServer && out ? Object.assign(out, {
-    matches: [],
-    url: undefined
-  }) : undefined;
   if (basePath === undefined) {
     throw new Error(`${basePath} is not a valid base path`);
   } else if (basePath && !source().value) {
@@ -570,19 +570,6 @@ function createRouterContext(integration, base = "", data, out) {
       return resolvePath(basePath, to);
     }
   };
-  if (data) {
-    try {
-      TempRoute = baseRoute;
-      baseRoute.data = data({
-        data: undefined,
-        params: {},
-        location,
-        navigate: navigatorFactory(baseRoute)
-      });
-    } finally {
-      TempRoute = undefined;
-    }
-  }
   function navigateFromRoute(route, to, options) {
     // Untrack in case someone navigates in an effect - don't want to track `reference` or route paths
     untrack(() => {
@@ -614,9 +601,6 @@ function createRouterContext(integration, base = "", data, out) {
       const current = reference();
       if (resolvedTo !== current || nextState !== state()) {
         if (isServer) {
-          if (output) {
-            output.url = resolvedTo;
-          }
           const e = getRequestEvent();
           e && (e.response = Response.redirect(resolvedTo, 302));
           setSource({
@@ -633,11 +617,13 @@ function createRouterContext(integration, base = "", data, out) {
             state: state()
           });
           start(() => {
+            intent = "navigate";
             setReference(resolvedTo);
             setState(nextState);
             resetErrorBoundaries();
           }).then(() => {
             if (referrers.length === len) {
+              intent = undefined;
               navigateEnd({
                 value: resolvedTo,
                 state: nextState
@@ -675,23 +661,38 @@ function createRouterContext(integration, base = "", data, out) {
     untrack(() => {
       if (value !== reference()) {
         start(() => {
+          intent = "native";
           setReference(value);
           setState(state);
+        }).then(() => {
+          intent = undefined;
         });
       }
     });
   });
   if (!isServer) {
-    function handleAnchorClick(evt) {
+    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 || !a.hasAttribute("link")) return;
-      const href = a.href;
-      if (a.target || !href && !a.hasAttribute("state")) return;
+      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 = new URL(href);
+      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();
@@ -702,94 +703,166 @@ function createRouterContext(integration, base = "", data, out) {
         state: state && JSON.parse(state)
       });
     }
+    function doPreload(a, path) {
+      const preload = a.getAttribute("preload") !== "false";
+      const matches = getRouteMatches(getBranches(), path);
+      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
+        });
+      }
+      intent = prevIntent;
+    }
+    function handleAnchorPreload(evt) {
+      const res = handleAnchor(evt);
+      if (!res) return;
+      const [a, url] = res;
+      if (!preloadTimeout[url.pathname]) doPreload(a, url.pathname);
+    }
+    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.pathname);
+        delete preloadTimeout[url.pathname];
+      }, 50);
+    }
+    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 && actionRef.startsWith("action:")) {
+        const data = new FormData(evt.target);
+        actions.get(actionRef.slice(7))(data);
+        evt.preventDefault();
+      }
+    }
 
-    // ensure delegated events run first
-    delegateEvents(["click"]);
+    // ensure delegated event run first
+    delegateEvents(["click", "submit"]);
     document.addEventListener("click", handleAnchorClick);
-    onCleanup(() => document.removeEventListener("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);
+    });
+  } else {
+    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,
+        input: input
+      }];
+    }
+    submissions = initFromFlash(location.query);
   }
   return {
     base: baseRoute,
-    out: output,
     location,
     isRouting,
     renderPath,
     parsePath,
     navigatorFactory,
-    beforeLeave
+    beforeLeave,
+    submissions: createSignal(submissions)
   };
 }
-function createRouteContext(router, parent, child, match, params) {
+function createRouteContext(router, parent, outlet, match, params) {
   const {
     base,
-    location,
-    navigatorFactory
+    location
   } = router;
   const {
     pattern,
-    element: outlet,
-    preload,
-    data
+    component,
+    load
   } = match().route;
   const path = createMemo(() => match().path);
-  preload && preload();
   const route = {
     parent,
     pattern,
-    get child() {
-      return child();
-    },
     path,
     params,
-    data: parent.data,
-    outlet,
+    outlet: () => component ? createComponent(component, {
+      params,
+      location,
+      get children() {
+        return outlet();
+      }
+    }) : outlet(),
     resolvePath(to) {
       return resolvePath(base.path(), to, path());
     }
   };
-  if (data) {
-    try {
-      TempRoute = route;
-      route.data = data({
-        data: parent.data,
-        params,
-        location,
-        navigate: navigatorFactory(route)
-      });
-    } finally {
-      TempRoute = undefined;
-    }
-  }
+  component && component.preload && component.preload();
+  load && load({
+    params,
+    location
+  });
   return route;
 }
 
-const _tmpl$ = /*#__PURE__*/template(`<a link>`);
+const _tmpl$ = /*#__PURE__*/template(`<a></a>`, 2);
 const Router = props => {
   let e;
   const {
     source,
     url,
-    base,
-    data,
-    out
+    base
   } = props;
   const integration = source || (isServer ? staticIntegration({
     value: url || (e = getRequestEvent()) && e.request.url || ""
   }) : pathIntegration());
-  const routerState = createRouterContext(integration, base, data, out);
+  const routeDefs = children(() => props.root ? {
+    component: props.root,
+    children: props.children
+  } : props.children);
+  const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
+  const routerState = createRouterContext(integration, branches, base);
   return createComponent$1(RouterContextObj.Provider, {
     value: routerState,
     get children() {
-      return props.children;
+      return createComponent$1(Routes, {
+        routerState: routerState,
+        get branches() {
+          return branches();
+        }
+      });
     }
   });
 };
-const Routes = props => {
-  const router = useRouter();
-  const parentRoute = useRoute();
-  const routeDefs = children(() => props.children);
-  const branches = createMemo(() => createBranches(routeDefs(), joinPaths(parentRoute.pattern, props.base || ""), Outlet));
-  const matches = createMemo(() => getRouteMatches(branches(), router.location.pathname));
+function Routes(props) {
+  const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
   const params = createMemoObject(() => {
     const m = matches();
     const params = {};
@@ -798,18 +871,6 @@ const Routes = props => {
     }
     return params;
   });
-  if (router.out) {
-    router.out.matches.push(matches().map(({
-      route,
-      path,
-      params
-    }) => ({
-      originalPath: route.originalPath,
-      pattern: route.pattern,
-      path,
-      params
-    })));
-  }
   const disposers = [];
   let root;
   const routeStates = createMemo(on(matches, (nextMatches, prevMatches, prev) => {
@@ -827,7 +888,7 @@ const Routes = props => {
         }
         createRoot(dispose => {
           disposers[i] = dispose;
-          next[i] = createRouteContext(router, next[i - 1] || parentRoute, () => routeStates()[i + 1], () => matches()[i], params);
+          next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()[i + 1]), () => matches()[i], params);
         });
       }
     }
@@ -850,26 +911,11 @@ const Routes = props => {
       }
     })
   });
-};
-const useRoutes = (routes, base) => {
-  return () => createComponent$1(Routes, {
-    base: base,
-    children: routes
-  });
-};
-const Route = props => {
-  const childRoutes = children(() => props.children);
-  return mergeProps(props, {
-    get children() {
-      return childRoutes();
-    }
-  });
-};
-const Outlet = () => {
-  const route = useRoute();
-  return createComponent$1(Show, {
+}
+const createOutlet = child => {
+  return () => createComponent$1(Show, {
     get when() {
-      return route.child;
+      return child();
     },
     keyed: true,
     children: child => createComponent$1(RouteContextObj.Provider, {
@@ -880,6 +926,14 @@ const Outlet = () => {
     })
   });
 };
+const Route = props => {
+  const childRoutes = children(() => props.children);
+  return mergeProps(props, {
+    get children() {
+      return childRoutes();
+    }
+  });
+};
 function A(props) {
   props = mergeProps({
     inactiveClass: "inactive",
@@ -897,7 +951,7 @@ function A(props) {
     return props.end ? path === loc : loc.startsWith(path);
   });
   return (() => {
-    const _el$ = _tmpl$();
+    const _el$ = _tmpl$.cloneNode(true);
     spread(_el$, mergeProps$1(rest, {
       get href() {
         return href() || props.href;
@@ -940,4 +994,210 @@ function Navigate(props) {
   return null;
 }
 
-export { A, A as Link, A as NavLink, Navigate, Outlet, Route, Router, Routes, mergeSearchString as _mergeSearchString, createBeforeLeave, createIntegration, createMemoryHistory, hashIntegration, memoryIntegration, normalizeIntegration, pathIntegration, staticIntegration, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useRouteData, useRoutes, useSearchParams };
+/**
+ * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
+ */
+function createAsync(fn) {
+  const [resource] = createResource(() => fn(), v => v);
+  return () => resource();
+}
+
+const LocationHeader = "Location";
+const PRELOAD_TIMEOUT = 5000;
+let cacheMap = new Map();
+function getCache() {
+  if (!isServer) return cacheMap;
+  const req = getRequestEvent() || sharedConfig.context;
+  return req.routerCache || (req.routerCache = new Map());
+}
+function revalidate(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);
+      }
+    }
+  });
+}
+function revalidateSignals(set, time) {
+  for (let s of set) s[1](time);
+}
+function cache(fn, name, options) {
+  const [store, setStore] = createStore({});
+  return (...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(":") : "");
+    let cached = cache.get(key);
+    let version;
+    if (owner) {
+      version = createSignal(now, {
+        equals: (p, v) => v - p < 50 // margin of error
+      });
+
+      onCleanup(() => cached[3].delete(version));
+      version[0](); // track it;
+    }
+
+    if (cached && (isServer || intent === "native" || Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
+      version && cached[3].add(version);
+      if (cached[2] === "preload" && intent !== "preload") {
+        cached[0] = now;
+        cached[1] = "then" in cached[1] ? cached[1].then(handleResponse) : handleResponse(cached[1]);
+        cached[2] = intent;
+      }
+      if (!isServer && intent === "navigate") {
+        startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
+      }
+
+      return cached[1];
+    }
+    let res = fn(...args);
+    if (intent !== "preload") {
+      res = "then" in res ? res.then(handleResponse) : handleResponse(res);
+    }
+    if (cached) {
+      cached[0] = now;
+      cached[1] = res;
+      cached[2] = intent;
+      version && cached[3].add(version);
+      if (!isServer && intent === "navigate") {
+        startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
+      }
+    } else cache.set(key, cached = [now, res, intent, new Set(version ? [version] : [])]);
+    return res;
+    function handleRedirect(response) {
+      startTransition(() => {
+        let url = response.headers.get(LocationHeader);
+        if (url && url.startsWith("/")) {
+          navigate(url, {
+            replace: true
+          });
+        } else if (!isServer && url) {
+          window.location.href = url;
+        }
+      });
+    }
+    function handleResponse(v) {
+      if (v instanceof Response && redirectStatusCodes.has(v.status)) {
+        if (navigate) isServer ? handleRedirect(v) : setTimeout(() => handleRedirect(v), 0);
+        return;
+      }
+      setStore(key, reconcile(v, options));
+      return store[key];
+    }
+  };
+}
+
+function useSubmissions(fn, filter) {
+  const router = useRouter();
+  const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.toString() && (!filter || filter(s.input))));
+  return new Proxy([], {
+    get(_, property) {
+      if (property === $TRACK) return subs();
+      if (property === "pending") return subs().some(sub => !sub.result);
+      return subs()[property];
+    }
+  });
+}
+function useSubmission(fn, filter) {
+  const submissions = useSubmissions(fn, filter);
+  return {
+    get clear() {
+      return submissions[0]?.clear;
+    },
+    get retry() {
+      return submissions[0]?.retry;
+    },
+    get url() {
+      return submissions[0]?.url;
+    },
+    get input() {
+      return submissions[0]?.input;
+    },
+    get result() {
+      return submissions[0]?.result;
+    },
+    get pending() {
+      return submissions[0]?.pending;
+    }
+  };
+}
+function action(fn, name) {
+  function mutate(variables) {
+    const p = fn(variables);
+    const [result, setResult] = createSignal();
+    let submission;
+    const router = this;
+    router.submissions[1](s => [...s, submission = {
+      input: variables,
+      url,
+      get result() {
+        return result()?.data;
+      },
+      get pending() {
+        return !result();
+      },
+      clear() {
+        router.submissions[1](v => v.filter(i => i.input !== variables));
+      },
+      retry() {
+        setResult(undefined);
+        const p = fn(variables);
+        p.then(async data => {
+          const keys = handleResponse(data, router.navigatorFactory());
+          await revalidate(keys);
+          data ? setResult({
+            data
+          }) : submission.clear();
+          return data;
+        }).catch(error => {
+          setResult({
+            data: error
+          });
+        });
+        return p;
+      }
+    }]);
+    p.then(async data => {
+      const keys = handleResponse(data, router.navigatorFactory());
+      await revalidate(keys);
+      data ? setResult({
+        data
+      }) : submission.clear();
+      return data;
+    }).catch(error => {
+      setResult({
+        data: error
+      });
+    });
+    return p;
+  }
+  const url = fn.url || `action:${name}` || !isServer ? `action:${fn.name}` : "";
+  mutate.toString = () => {
+    if (!url) throw new Error("Client Actions need explicit names if server rendered");
+    return url;
+  };
+  if (!isServer) registerAction(url, mutate);
+  return mutate;
+}
+function handleResponse(response, navigate) {
+  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);
+    }
+  }
+  // return keys
+  return;
+}
+
+export { A, A as Link, A as NavLink, Navigate, Route, Router, mergeSearchString as _mergeSearchString, action, cache, createAsync, createBeforeLeave, createIntegration, createMemoryHistory, hashIntegration, memoryIntegration, normalizeIntegration, pathIntegration, revalidate, staticIntegration, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };