@solidjs/router 0.10.4 → 0.10.6

package/README.md

@@ -102,7 +102,35 @@ render(() => (
 ), document.getElementById("app"));
 ```
 
-3. Lazy-load route components
+3. Create a CatchAll Route (404 page)
+
+We can create catchall routes for pages not found at any nested level of the router. We use `*` and optionally the name of a parameter to retrieve the rest of the path.
+
+```jsx
+import { render } from "solid-js/web";
+import { Router, Route } from "@solidjs/router";
+
+import Home from "./pages/Home";
+import Users from "./pages/Users";
+import NotFound from "./pages/404";
+
+const App = props => (
+  <>
+    <h1>My Site with lots of pages</h1>
+    {props.children}
+  </>
+)
+
+render(() => (
+  <Router root={App}>
+    <Route path="/users" component={Users} />
+    <Route path="/" component={Home} />
+    <Route path="*404" component={NotFound} />
+  </Router>
+), document.getElementById("app"));
+```
+
+4. Lazy-load route components
 
 This way, the `Users` and `Home` components will only be loaded if you're navigating to `/users` or `/`, respectively.
 
@@ -581,7 +609,7 @@ const updateTodo = action(async (todo: Todo) => {
 
 ## Config Based Routing
 
-You don't have to use JSX to set up your routes; you can pass an object:
+You don't have to use JSX to set up your routes; you can pass an array of route definitions:
 
 ```jsx
 import { lazy } from "solid-js";
@@ -627,6 +655,21 @@ render(() =>
 );
 ```
 
+Also you can pass a single route definition object for a single route:
+
+```jsx
+import { lazy } from "solid-js";
+import { render } from "solid-js/web";
+import { Router } from "@solidjs/router";
+
+const route = {
+  path: "/",
+  component: lazy(() => import("/pages/index.js"))
+};
+
+render(() => <Router>{route}</Router>, document.getElementById("app"));
+```
+
 ## Alternative Routers
 
 ### Hash Mode Router
@@ -669,7 +712,7 @@ This is the main Router component for the browser.
 
 | prop | type | description |
 |-----|----|----|
-| children | `JSX.Element` or `RouteDefinition[]` | The route definitions |
+| children | `JSX.Element`, `RouteDefinition`, or `RouteDefinition[]` | The route definitions |
 | root | Component | Top level layout component |
 | base | string | Base url to use for matching routes |
 | actionBase | string | Root url for server actions, default: `/_server` |
@@ -846,7 +889,9 @@ 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. 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.
+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.
+
+Keep in mind no `<Routes>` means the `<Router>` API is different. The `<Router>` acts as the `<Routes>` component and its children can only be `<Route>` components. Your top-level layout should go in the root prop of the router [as shown above](#configure-your-routes)
 
 ## `element` prop removed from `Route`
 

package/dist/data/cache.d.ts

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

package/dist/data/cache.js

@@ -70,12 +70,12 @@ export function cache(fn, name, options) {
                 cached[0] = now;
             }
             let res = cached[1];
-            if (!isServer && intent === "navigate") {
+            if (!isServer && intent !== "preload") {
                 res =
                     "then" in cached[1]
                         ? cached[1].then(handleResponse(false), handleResponse(true))
                         : handleResponse(false)(cached[1]);
-                startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
+                intent === "navigate" && startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
             }
             return res;
         }
@@ -156,6 +156,7 @@ cache.set = (key, value) => {
     else
         cache.set(key, (cached = [now, value, , new Set(version ? [version] : [])]));
 };
+cache.clear = () => getCache().clear();
 function matchKey(key, keys) {
     for (let k of keys) {
         if (key.startsWith(k))

package/dist/data/index.d.ts

@@ -1,4 +1,4 @@
 export { createAsync } from "./createAsync";
 export { action, useSubmission, useSubmissions, useAction, type Action } from "./action";
 export { cache, revalidate, type CachedFunction } from "./cache";
-export { redirect } from "./response";
+export { redirect, reload } from "./response";

package/dist/data/index.js

@@ -1,4 +1,4 @@
 export { createAsync } from "./createAsync";
 export { action, useSubmission, useSubmissions, useAction } from "./action";
 export { cache, revalidate } from "./cache";
-export { redirect } from "./response";
+export { redirect, reload } from "./response";

package/dist/index.js

@@ -22,7 +22,10 @@ function createBeforeLeave() {
       from: l.location,
       retry: force => {
         force && (ignore = true);
-        l.navigate(to, options);
+        l.navigate(to, {
+          ...options,
+          resolve: false
+        });
       }
     });
     return !e.defaultPrevented;
@@ -830,9 +833,9 @@ function cache(fn, name, options) {
         cached[0] = now;
       }
       let res = cached[1];
-      if (!isServer && intent === "navigate") {
+      if (!isServer && intent !== "preload") {
         res = "then" in cached[1] ? cached[1].then(handleResponse(false), handleResponse(true)) : handleResponse(false)(cached[1]);
-        startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
+        intent === "navigate" && startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
       }
 
       return res;
@@ -905,6 +908,7 @@ cache.set = (key, value) => {
     version && cached[3].add(version);
   } else cache.set(key, cached = [now, value,, new Set(version ? [version] : [])]);
 };
+cache.clear = () => getCache().clear();
 function matchKey(key, keys) {
   for (let k of keys) {
     if (key.startsWith(k)) return true;
@@ -1392,5 +1396,17 @@ function redirect(url, init = 302) {
   });
   return response;
 }
+function reload(init) {
+  const {
+    revalidate,
+    ...responseInit
+  } = init;
+  return new Response(null, {
+    ...responseInit,
+    ...(revalidate ? {
+      headers: new Headers(responseInit.headers).set("X-Revalidate", revalidate.toString())
+    } : {})
+  });
+}
 
-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 };
+export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createBeforeLeave, createMemoryHistory, createRouter, redirect, reload, revalidate, useAction, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };

package/dist/lifecycle.js

@@ -20,7 +20,7 @@ export function createBeforeLeave() {
                 from: l.location,
                 retry: (force) => {
                     force && (ignore = true);
-                    l.navigate(to, options);
+                    l.navigate(to, { ...options, resolve: false });
                 }
             });
         return !e.defaultPrevented;

package/dist/routers/components.d.ts

@@ -2,16 +2,19 @@ import type { Component, JSX } from "solid-js";
 import type { MatchFilters, RouteLoadFunc, RouteDefinition, RouterIntegration, RouteSectionProps } from "../types";
 export type BaseRouterProps = {
     base?: string;
+    /**
+     * A component that wraps the content of every route.
+     */
     root?: Component<RouteSectionProps>;
     children?: JSX.Element | RouteDefinition | RouteDefinition[];
 };
 export declare const createRouterComponent: (router: RouterIntegration) => (props: BaseRouterProps) => JSX.Element;
-export type RouteProps<S extends string> = {
+export type RouteProps<S extends string, T = unknown> = {
     path?: S | S[];
     children?: JSX.Element;
-    load?: RouteLoadFunc;
+    load?: RouteLoadFunc<T>;
     matchFilters?: MatchFilters<S>;
-    component?: Component;
+    component?: Component<RouteSectionProps<T>>;
     metadata?: Record<string, any>;
 };
-export declare const Route: <S extends string>(props: RouteProps<S>) => JSX.Element;
+export declare const Route: <S extends string, T = unknown>(props: RouteProps<S, T>) => JSX.Element;

package/dist/routing.d.ts

@@ -11,7 +11,7 @@ export declare const useLocation: <S = unknown>() => Location<S>;
 export declare const useIsRouting: () => () => boolean;
 export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S> | undefined) => Accessor<import("./types").PathMatch | undefined>;
 export declare const useParams: <T extends Params>() => T;
-export declare const useSearchParams: <T extends Params>() => [T, (params: SetParams, options?: Partial<NavigateOptions>) => void];
+export declare const useSearchParams: <T extends Params>() => [Partial<T>, (params: SetParams, options?: Partial<NavigateOptions>) => void];
 export declare const useBeforeLeave: (listener: (e: BeforeLeaveEventArgs) => void) => void;
 export declare function createRoutes(routeDef: RouteDefinition, base?: string): Route[];
 export declare function createBranch(routes: Route[], index?: number): Branch;

package/package.json

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