@solidjs/router 0.10.0-beta.9 → 0.10.0

package/README.md

@@ -4,6 +4,8 @@
 
 # Solid Router [![npm Version](https://img.shields.io/npm/v/@solidjs/router.svg?style=flat-square)](https://www.npmjs.org/package/@solidjs/router)
 
+**Version 0.10.0 requires Solid v1.8.4 or later.**
+
 A router lets you change your view based on the URL in the browser. This allows your "single-page" application to simulate a traditional multipage site. To use Solid Router, you specify components called Routes that depend on the value of the URL (the "path"), and the router handles the mechanism of swapping them in and out.
 
 Solid Router is a universal router for SolidJS - it works whether you're rendering on the client or on the server. It was inspired by and combines paradigms of React Router and the Ember Router. Routes can be defined directly in your app's template using JSX, but you can also pass your route configuration directly as an object. It also supports nested routing, so navigation can change a part of a component, rather than completely replacing it.
@@ -376,7 +378,9 @@ getUser.key // returns "users"
 getUser.keyFor(id) // returns "users[5]"
 ```
 
-This cache can be defined anywhere and then used inside your components with:
+You can revalidate the cache using the `revalidate` method or you can set `revalidate` keys on your response from your actions. If you pass the whole key it will invalidate all the entries for the cache (ie "users" in the example above). You can also invalidate a single entry by using `keyFor`.
+
+`cache` can be defined anywhere and then used inside your components with:
 
 ### `createAsync`
 
@@ -390,7 +394,7 @@ Using `cache` in `createResource` directly won't work properly as the fetcher is
 
 ### `action`
 
-Actions are data mutations that can trigger invalidations and further routing. A list of prebuilt response builders can be found below(TODO).
+Actions are data mutations that can trigger invalidations and further routing. A list of prebuilt response helpers can be found below.
 ```jsx
 import { action, revalidate, redirect } from "@solidjs/router"
 
@@ -450,7 +454,7 @@ const submit = useAction(myAction)
 submit(...args)
 ```
 
-The outside of a form context you can use custom data instead of formData, and these helpers preserve types.
+The outside of a form context you can use custom data instead of formData, and these helpers preserve types. However, even when used with server functions (in projects like SolidStart) this requires client side javascript and is not Progressive Enhancible like forms are.
 
 ### `useSubmission`/`useSubmissions`
 
@@ -470,6 +474,36 @@ const submissions = useSubmissions(action, (input) => filter(input));
 const submission = useSubmission(action, (input) => filter(input));
 ```
 
+### Response Helpers
+
+These are used to communicate router navigations from cache/actions, and can include invalidation hints. Generally these are thrown to not interfere the with the types and make it clear that function ends execution at that point.
+
+#### `redirect(path, options)`
+
+Redirects to the next route
+```js
+const getUser = cache(() => {
+  const user = await api.getCurrentUser()
+  if (!user) throw redirect("/login");
+  return user;
+})
+```
+
+#### `reload(options)`
+
+Reloads the data on the current page
+```js
+const getTodo = cache(async (id: number) => {
+  const todo = await fetchTodo(id);
+  return todo;
+}, "todo")
+
+const updateTodo = action(async (todo: Todo) => {
+  await updateTodo(todo.id, todo);
+  reload({ revalidate: getTodo.keyFor(id) })
+})
+```
+
 ### Load Functions
 
 Even with the cache API it is possible that we have waterfalls both with view logic and with lazy loaded code. With load functions, we can instead start fetching the data parallel to loading the route, so we can use the data as soon as possible.
@@ -614,7 +648,7 @@ 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 |
+| root | Component | Top level layout component |
 | base | string | Base url to use for matching routes |
 | actionBase | string | Root url for server actions, default: `/_server` |
 | preload | boolean | Enables/disables preloads globally, default: `true` |
@@ -657,7 +691,11 @@ The Component for defining Routes:
 
 | prop | type | description |
 |-|-|-|
-|TODO
+| path | string | Path partial for defining the route segment |
+| component | `Component` | Component that will be rendered for the matched segment |
+| matchFilters | `MatchFilters` | Additional constraints for matching against the route |
+| children | `JSX.Element` | Nested `<Route>` definitions |
+| load | `RouteLoadFunc` | Function called during preload or when the route is navigated to. |
 
 ## Router Primitives
 
@@ -786,7 +824,7 @@ The biggest changes are around removed APIs that need to be replaced.
 
 ### `<Outlet>`, `<Routes>`, `useRoutes`
 
-This is no longer used and instead will use `props.children` passed from into the page components for outlets. Nested Routes inherently cause waterfalls and are Outlets in a sense themselves. We do not want to encourage the pattern and if you must do it you can always nest `<Routers>` with appropriate base path.
+This is no longer used and instead will use `props.children` passed from into the page components for outlets. This keeps the outlet directly passed from its page and avoids oddness of trying to use context across Islands boundaries. Nested `<Routes>` components inherently cause waterfalls and are `<Outlets>` themselves so they have the same concerns. We do not want to encourage the pattern and if you must do it you can always nest `<Router>`s with appropriate base path.
 
 ## `element` prop removed from `Route`
 

package/dist/data/action.js

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

package/dist/data/cache.d.ts

@@ -1,5 +1,8 @@
+import { type Signal } from "solid-js";
 import { type ReconcileOptions } from "solid-js/store";
-export declare function revalidate(key?: string | string[] | void): Promise<void>;
+type CacheEntry = [number, any, string, Set<Signal<number>>];
+export declare function revalidate(key?: string | string[] | void, force?: boolean): Promise<void>;
+export declare function cacheKeyOp(key: string | string[] | void, fn: (cacheEntry: CacheEntry) => void): void;
 export type CachedFunction<T extends (...args: any) => U | Response, U> = T & {
     keyFor: (...args: Parameters<T>) => string;
     key: string;
@@ -9,3 +12,4 @@ export declare namespace cache {
     var set: (key: string, value: any) => void;
 }
 export declare function hashKey<T extends Array<any>>(args: T): string;
+export {};

package/dist/data/cache.js

@@ -26,19 +26,22 @@ function getCache() {
         throw new Error("Cannot find cache context");
     return req.routerCache || (req.routerCache = new Map());
 }
-export function revalidate(key) {
-    key && !Array.isArray(key) && (key = [key]);
+export function revalidate(key, force = true) {
     return startTransition(() => {
         const now = Date.now();
-        for (let k of cacheMap.keys()) {
-            if (key === undefined || matchKey(k, key)) {
-                const entry = cacheMap.get(k);
-                entry[0] = 0; //force cache miss
-                revalidateSignals(entry[3], now); // retrigger live signals
-            }
-        }
+        cacheKeyOp(key, entry => {
+            force && (entry[0] = 0); //force cache miss
+            revalidateSignals(entry[3], now); // retrigger live signals
+        });
     });
 }
+export function cacheKeyOp(key, fn) {
+    key && !Array.isArray(key) && (key = [key]);
+    for (let k of cacheMap.keys()) {
+        if (key === undefined || matchKey(k, key))
+            fn(cacheMap.get(k));
+    }
+}
 function revalidateSignals(set, time) {
     for (let s of set)
         s[1](time);
@@ -80,7 +83,7 @@ export function cache(fn, name, options) {
             ? sharedConfig.load(key) // hydrating
             : fn(...args);
         // serialize on server
-        if (isServer && (sharedConfig.context && !sharedConfig.context.noHydrate)) {
+        if (isServer && sharedConfig.context && !sharedConfig.context.noHydrate) {
             const e = getRequestEvent();
             (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
         }
@@ -133,7 +136,6 @@ export function cache(fn, name, options) {
     cachedFn.key = name;
     return cachedFn;
 }
-;
 cache.set = (key, value) => {
     const cache = getCache();
     const now = Date.now();

package/dist/index.js

@@ -768,20 +768,22 @@ function getCache() {
   if (!req) throw new Error("Cannot find cache context");
   return req.routerCache || (req.routerCache = new Map());
 }
-function revalidate(key) {
-  key && !Array.isArray(key) && (key = [key]);
+function revalidate(key, force = true) {
   return startTransition(() => {
     const now = Date.now();
-    for (let k of cacheMap.keys()) {
-      if (key === undefined || matchKey(k, key)) {
-        const entry = cacheMap.get(k);
-        entry[0] = 0; //force cache miss
-        revalidateSignals(entry[3], now); // retrigger live signals
-      }
-    }
+    cacheKeyOp(key, entry => {
+      force && (entry[0] = 0); //force cache miss
+      revalidateSignals(entry[3], now); // retrigger live signals
+    });
   });
 }
 
+function cacheKeyOp(key, fn) {
+  key && !Array.isArray(key) && (key = [key]);
+  for (let k of cacheMap.keys()) {
+    if (key === undefined || matchKey(k, key)) fn(cacheMap.get(k));
+  }
+}
 function revalidateSignals(set, time) {
   for (let s of set) s[1](time);
 }
@@ -965,7 +967,7 @@ function action(fn, name) {
     p.then(handler, handler);
     return p;
   }
-  const url = fn.url || name && `action:${name}` || (!isServer ? `action:${fn.name}` : "");
+  const url = fn.url || name && `action:${name}` || (!isServer ? `action:${hashString(fn.toString())}` : "");
   return toAction(mutate, url);
 }
 function toAction(fn, url) {
@@ -979,7 +981,7 @@ function toAction(fn, url) {
     };
     const uri = new URL(url, "http://sar");
     uri.searchParams.set("args", hashKey(args));
-    return toAction(newFn, uri.pathname + uri.search);
+    return toAction(newFn, (uri.protocol === "action:" ? uri.protocol : "") + uri.pathname + uri.search);
   };
   fn.url = url;
   if (!isServer) {
@@ -988,12 +990,15 @@ function toAction(fn, url) {
   }
   return fn;
 }
+const hashString = s => s.split("").reduce((a, b) => (a << 5) - a + b.charCodeAt(0) | 0, 0);
 async function handleResponse(response, navigate) {
   let data;
   let keys;
   if (response instanceof Response) {
     if (response.headers.has("X-Revalidate")) {
       keys = response.headers.get("X-Revalidate").split(",");
+      // invalidate
+      cacheKeyOp(keys, entry => entry[0] = 0);
     }
     if (response.customBody) data = await response.customBody();
     if (redirectStatusCodes.has(response.status)) {
@@ -1005,7 +1010,8 @@ async function handleResponse(response, navigate) {
       }
     }
   } else data = response;
-  await revalidate(keys);
+  // trigger revalidation
+  await revalidate(keys, false);
   return data;
 }
 

package/package.json

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