@solidjs/router 0.12.4 → 0.13.0

package/README.md

@@ -59,7 +59,7 @@ This sets up a Router that will match on the url to display the desired page
 
 Solid Router allows you to configure your routes using JSX:
 
-1. Add each route to a `<Router>` using the `Route` component, specifying a path and an element or component to render when the user navigates to that path.
+1. Add each route to a `<Router>` using the `Route` component, specifying a path and a component to render when the user navigates to that path.
 
 ```jsx
 import { render } from "solid-js/web";
@@ -494,6 +494,14 @@ const user = createAsync((currentValue) => getUser(params.id))
 
 Using `cache` in `createResource` directly won't work properly as the fetcher is not reactive and it won't invalidate properly.
 
+### `createAsyncStore`
+
+Similar to `createAsync` except it uses a deeply reactive store. Perfect for applying fine-grained changes to large model data that updates.
+
+```jsx
+const todos = createAsyncStore(() => getTodos());
+```
+
 ### `action`
 
 Actions are data mutations that can trigger invalidations and further routing. A list of prebuilt response helpers can be found below.

package/dist/data/action.js

@@ -26,21 +26,28 @@ export function useSubmission(fn, filter) {
     });
 }
 export function useAction(action) {
-    const router = useRouter();
-    return (...args) => action.apply(router, args);
+    const r = useRouter();
+    return (...args) => action.apply({ r }, args);
 }
 export function action(fn, name) {
     function mutate(...variables) {
-        const router = this;
+        const router = this.r;
+        const form = this.f;
         const p = (router.singleFlight && fn.withOptions
             ? fn.withOptions({ headers: { "X-Single-Flight": "true" } })
             : fn)(...variables);
         const [result, setResult] = createSignal();
         let submission;
-        async function handler(res) {
-            const data = await handleResponse(res, router.navigatorFactory());
-            data ? setResult({ data }) : submission.clear();
-            return data;
+        function handler(error) {
+            return async (res) => {
+                const result = await handleResponse(res, error, router.navigatorFactory());
+                if (!result)
+                    return submission.clear();
+                setResult(result);
+                if (result.error && !form)
+                    throw result.error;
+                return result.data;
+            };
         }
         router.submissions[1](s => [
             ...s,
@@ -50,6 +57,9 @@ export function action(fn, name) {
                 get result() {
                     return result()?.data;
                 },
+                get error() {
+                    return result()?.error;
+                },
                 get pending() {
                     return !result();
                 },
@@ -59,11 +69,11 @@ export function action(fn, name) {
                 retry() {
                     setResult(undefined);
                     const p = fn(...variables);
-                    return p.then(handler, handler);
+                    return p.then(handler(), handler(true));
                 }
             })
         ]);
-        return p.then(handler, handler);
+        return p.then(handler(), handler(true));
     }
     const url = fn.url ||
         (name && `https://action/${name}`) ||
@@ -92,7 +102,7 @@ function toAction(fn, url) {
     return fn;
 }
 const hashString = (s) => s.split("").reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
-async function handleResponse(response, navigate) {
+async function handleResponse(response, error, navigate) {
     let data;
     let keys;
     let invalidateKeys;
@@ -123,11 +133,13 @@ async function handleResponse(response, navigate) {
             }
         }
     }
+    else if (error)
+        return { error: response };
     else
         data = response;
     // invalidate
     cacheKeyOp(invalidateKeys, entry => (entry[0] = 0));
     // trigger revalidation
     await revalidate(keys, false);
-    return data;
+    return data != null ? { data } : undefined;
 }

package/dist/data/cache.js

@@ -73,9 +73,10 @@ export function cache(fn, name) {
             onCleanup(() => cached[3].count--);
         }
         if (cached &&
+            cached[0] &&
             (isServer ||
                 intent === "native" ||
-                (cached[0] && cached[3].count) ||
+                cached[3].count ||
                 Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
             if (tracking) {
                 cached[3].count++;

package/dist/data/events.js

@@ -103,7 +103,7 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
                 const data = new FormData(evt.target);
                 if (evt.submitter && evt.submitter.name)
                     data.append(evt.submitter.name, evt.submitter.value);
-                handler.call(router, data);
+                handler.call({ r: router, f: evt.target }, data);
             }
         }
         // ensure delegated event run first

package/dist/index.js

@@ -1,5 +1,5 @@
 import { isServer, getRequestEvent, createComponent as createComponent$1, memo, 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, getListener, sharedConfig, $TRACK, splitProps, createResource } from 'solid-js';
+import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, createRenderEffect, on, startTransition, resetErrorBoundaries, createComponent, children, mergeProps, Show, createRoot, getListener, sharedConfig, $TRACK, splitProps, createResource } from 'solid-js';
 import { createStore, reconcile, unwrap } from 'solid-js/store';
 
 function createBeforeLeave() {
@@ -230,7 +230,7 @@ function expandOptionals(pattern) {
 const MAX_REDIRECTS = 100;
 const RouterContextObj = createContext();
 const RouteContextObj = createContext();
-const useRouter = () => invariant(useContext(RouterContextObj), "Make sure your app is wrapped in a <Router />");
+const useRouter = () => invariant(useContext(RouterContextObj), "<A> and 'use' router primitives can be only used inside a Route.");
 const useRoute = () => useContext(RouteContextObj) || useRouter().base;
 const useResolvedPath = path => {
   const route = useRoute();
@@ -642,35 +642,70 @@ const createRouterComponent = router => props => {
     base
   } = props;
   const routeDefs = children(() => props.children);
-  const branches = createMemo(() => createBranches(props.root ? {
-    component: props.root,
-    load: props.rootLoad,
-    children: routeDefs()
-  } : routeDefs(), props.base || ""));
+  const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
   let context;
   const routerState = createRouterContext(router, () => context, branches, {
     base,
     singleFlight: props.singleFlight
   });
+  const location = routerState.location;
   router.create && router.create(routerState);
   return createComponent$1(RouterContextObj.Provider, {
     value: routerState,
     get children() {
-      return [memo(() => (context = getOwner()) && null), createComponent$1(Routes, {
-        routerState: routerState,
-        get branches() {
-          return branches();
+      return createComponent$1(Root, {
+        location: location,
+        get root() {
+          return props.root;
+        },
+        get load() {
+          return props.rootLoad;
+        },
+        get children() {
+          return [memo(() => (context = getOwner()) && null), createComponent$1(Routes, {
+            routerState: routerState,
+            get branches() {
+              return branches();
+            }
+          })];
         }
-      })];
+      });
     }
   });
 };
+function Root(props) {
+  const location = props.location;
+  const data = createMemo(() => props.load && untrack(() => props.load({
+    params: {},
+    location,
+    intent: "preload"
+  })));
+  return createComponent$1(Show, {
+    get when() {
+      return props.root;
+    },
+    keyed: true,
+    get fallback() {
+      return props.children;
+    },
+    children: Root => createComponent$1(Root, {
+      params: {},
+      location: location,
+      get data() {
+        return data();
+      },
+      get children() {
+        return props.children;
+      }
+    })
+  });
+}
 function Routes(props) {
   const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
   if (isServer) {
     const e = getRequestEvent();
     if (e && e.router && e.router.dataOnly) {
-      dataOnly(e, props.branches);
+      dataOnly(e, props.routerState, props.branches);
       return;
     }
     e && ((e.router || (e.router = {})).matches || (e.router.matches = matches().map(({
@@ -721,18 +756,7 @@ function Routes(props) {
     root = next[0];
     return next;
   }));
-  return createComponent$1(Show, {
-    get when() {
-      return routeStates() && root;
-    },
-    keyed: true,
-    children: route => createComponent$1(RouteContextObj.Provider, {
-      value: route,
-      get children() {
-        return route.outlet();
-      }
-    })
-  });
+  return createOutlet(() => routeStates() && root)();
 }
 const createOutlet = child => {
   return () => createComponent$1(Show, {
@@ -758,7 +782,7 @@ const Route = props => {
 };
 
 // for data only mode with single flight mutations
-function dataOnly(event, branches) {
+function dataOnly(event, routerState, branches) {
   const url = new URL(event.request.url);
   const prevMatches = getRouteMatches(branches, new URL(event.router.previousUrl || event.request.url).pathname);
   const matches = getRouteMatches(branches, url.pathname);
@@ -770,14 +794,7 @@ function dataOnly(event, branches) {
     } = matches[match];
     route.load && route.load({
       params,
-      location: {
-        pathname: url.pathname,
-        search: url.search,
-        hash: url.hash,
-        query: extractSearchParams(url),
-        state: null,
-        key: ""
-      },
+      location: routerState.location,
       intent: "preload"
     });
   }
@@ -913,7 +930,7 @@ function cache(fn, name) {
       tracking = true;
       onCleanup(() => cached[3].count--);
     }
-    if (cached && (isServer || intent === "native" || cached[0] && cached[3].count || Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
+    if (cached && cached[0] && (isServer || intent === "native" || cached[3].count || Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
       if (tracking) {
         cached[3].count++;
         cached[3][0](); // track
@@ -1040,12 +1057,15 @@ function useSubmission(fn, filter) {
   });
 }
 function useAction(action) {
-  const router = useRouter();
-  return (...args) => action.apply(router, args);
+  const r = useRouter();
+  return (...args) => action.apply({
+    r
+  }, args);
 }
 function action(fn, name) {
   function mutate(...variables) {
-    const router = this;
+    const router = this.r;
+    const form = this.f;
     const p = (router.singleFlight && fn.withOptions ? fn.withOptions({
       headers: {
         "X-Single-Flight": "true"
@@ -1053,12 +1073,14 @@ function action(fn, name) {
     }) : fn)(...variables);
     const [result, setResult] = createSignal();
     let submission;
-    async function handler(res) {
-      const data = await handleResponse(res, router.navigatorFactory());
-      data ? setResult({
-        data
-      }) : submission.clear();
-      return data;
+    function handler(error) {
+      return async res => {
+        const result = await handleResponse(res, error, router.navigatorFactory());
+        if (!result) return submission.clear();
+        setResult(result);
+        if (result.error && !form) throw result.error;
+        return result.data;
+      };
     }
     router.submissions[1](s => [...s, submission = {
       input: variables,
@@ -1066,6 +1088,9 @@ function action(fn, name) {
       get result() {
         return result()?.data;
       },
+      get error() {
+        return result()?.error;
+      },
       get pending() {
         return !result();
       },
@@ -1075,10 +1100,10 @@ function action(fn, name) {
       retry() {
         setResult(undefined);
         const p = fn(...variables);
-        return p.then(handler, handler);
+        return p.then(handler(), handler(true));
       }
     }]);
-    return p.then(handler, handler);
+    return p.then(handler(), handler(true));
   }
   const url = fn.url || name && `https://action/${name}` || (!isServer ? `https://action/${hashString(fn.toString())}` : "");
   return toAction(mutate, url);
@@ -1104,7 +1129,7 @@ function toAction(fn, url) {
   return fn;
 }
 const hashString = s => s.split("").reduce((a, b) => (a << 5) - a + b.charCodeAt(0) | 0, 0);
-async function handleResponse(response, navigate) {
+async function handleResponse(response, error, navigate) {
   let data;
   let keys;
   let invalidateKeys;
@@ -1131,12 +1156,16 @@ async function handleResponse(response, navigate) {
         navigate(locationUrl);
       }
     }
-  } else data = response;
+  } else if (error) return {
+    error: response
+  };else data = response;
   // invalidate
   cacheKeyOp(invalidateKeys, entry => entry[0] = 0);
   // trigger revalidation
   await revalidate(keys, false);
-  return data;
+  return data != null ? {
+    data
+  } : undefined;
 }
 
 function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "/_server") {
@@ -1215,7 +1244,10 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
         evt.preventDefault();
         const data = new FormData(evt.target);
         if (evt.submitter && evt.submitter.name) data.append(evt.submitter.name, evt.submitter.value);
-        handler.call(router, data);
+        handler.call({
+          r: router,
+          f: evt.target
+        }, data);
       }
     }
 

package/dist/routers/components.jsx

@@ -1,26 +1,41 @@
 /*@refresh skip*/
 import { getRequestEvent, isServer } from "solid-js/web";
-import { children, createMemo, createRoot, getOwner, mergeProps, on, Show } from "solid-js";
+import { children, createMemo, createRoot, getOwner, mergeProps, on, Show, untrack } from "solid-js";
 import { createBranches, createRouteContext, createRouterContext, getRouteMatches, RouteContextObj, RouterContextObj } from "../routing.js";
-import { createMemoObject, extractSearchParams } from "../utils.js";
+import { createMemoObject } from "../utils.js";
 export const createRouterComponent = (router) => (props) => {
     const { base } = props;
     const routeDefs = children(() => props.children);
-    const branches = createMemo(() => createBranches(props.root ? { component: props.root, load: props.rootLoad, children: routeDefs() } : routeDefs(), props.base || ""));
+    const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
     let context;
-    const routerState = createRouterContext(router, () => context, branches, { base, singleFlight: props.singleFlight });
+    const routerState = createRouterContext(router, () => context, branches, {
+        base,
+        singleFlight: props.singleFlight
+    });
+    const location = routerState.location;
     router.create && router.create(routerState);
     return (<RouterContextObj.Provider value={routerState}>
-      {(context = getOwner()) && null}
-      <Routes routerState={routerState} branches={branches()}/>
+      <Root location={location} root={props.root} load={props.rootLoad}>
+        {(context = getOwner()) && null}
+        <Routes routerState={routerState} branches={branches()}/>
+      </Root>
     </RouterContextObj.Provider>);
 };
+function Root(props) {
+    const location = props.location;
+    const data = createMemo(() => props.load && untrack(() => props.load({ params: {}, location, intent: "preload" })));
+    return (<Show when={props.root} keyed fallback={props.children}>
+      {Root => (<Root params={{}} location={location} data={data()}>
+          {props.children}
+        </Root>)}
+    </Show>);
+}
 function Routes(props) {
     const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
     if (isServer) {
         const e = getRequestEvent();
         if (e && e.router && e.router.dataOnly) {
-            dataOnly(e, props.branches);
+            dataOnly(e, props.routerState, props.branches);
             return;
         }
         e &&
@@ -70,9 +85,7 @@ function Routes(props) {
         root = next[0];
         return next;
     }));
-    return (<Show when={routeStates() && root} keyed>
-      {route => <RouteContextObj.Provider value={route}>{route.outlet()}</RouteContextObj.Provider>}
-    </Show>);
+    return createOutlet(() => routeStates() && root)();
 }
 const createOutlet = (child) => {
     return () => (<Show when={child()} keyed>
@@ -88,7 +101,7 @@ export const Route = (props) => {
     });
 };
 // for data only mode with single flight mutations
-function dataOnly(event, branches) {
+function dataOnly(event, routerState, branches) {
     const url = new URL(event.request.url);
     const prevMatches = getRouteMatches(branches, new URL(event.router.previousUrl || event.request.url).pathname);
     const matches = getRouteMatches(branches, url.pathname);
@@ -99,14 +112,7 @@ function dataOnly(event, branches) {
         route.load &&
             route.load({
                 params,
-                location: {
-                    pathname: url.pathname,
-                    search: url.search,
-                    hash: url.hash,
-                    query: extractSearchParams(url),
-                    state: null,
-                    key: ""
-                },
+                location: routerState.location,
                 intent: "preload"
             });
     }

package/dist/routing.js

@@ -6,7 +6,7 @@ import { mockBase, createMemoObject, extractSearchParams, invariant, resolvePath
 const MAX_REDIRECTS = 100;
 export const RouterContextObj = createContext();
 export const RouteContextObj = createContext();
-export const useRouter = () => invariant(useContext(RouterContextObj), "Make sure your app is wrapped in a <Router />");
+export const useRouter = () => invariant(useContext(RouterContextObj), "<A> and 'use' router primitives can be only used inside a Route.");
 let TempRoute;
 export const useRoute = () => TempRoute || useContext(RouteContextObj) || useRouter().base;
 export const useResolvedPath = (path) => {
@@ -352,7 +352,9 @@ export function createRouterContext(integration, getContext, getBranches, option
     }
     function initFromFlash() {
         const e = getRequestEvent();
-        return e && e.router && e.router.submission ? [e.router.submission] : [];
+        return (e && e.router && e.router.submission
+            ? [e.router.submission]
+            : []);
     }
 }
 export function createRouteContext(router, parent, outlet, match, params) {

package/dist/types.d.ts

@@ -9,7 +9,11 @@ declare module "solid-js/web" {
         router?: {
             matches?: OutputMatch[];
             cache?: Map<string, CacheEntry>;
-            submission?: Submission<any, any>;
+            submission?: {
+                input: any;
+                result: any;
+                url: string;
+            };
             dataOnly?: boolean | string[];
             data?: Record<string, any>;
             previousUrl?: string;
@@ -153,6 +157,7 @@ export interface BeforeLeaveLifecycle {
 export type Submission<T, U> = {
     readonly input: T;
     readonly result?: U;
+    readonly error: any;
     readonly pending: boolean;
     readonly url: string;
     clear: () => void;

package/package.json

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