@solidjs/router 0.4.2 → 0.5.0

package/README.md

@@ -2,9 +2,6 @@
   <img src="https://assets.solidjs.com/banner?project=Router&type=core" alt="Solid Router" />
 </p>
 
-> 0.3.x only works with Solid v1.3.5 or later.
-> `useData` has been renamed to `useRouteData` and no longer takes arguments. Refer to documentation below.
-
 # Solid Router [![npm Version](https://img.shields.io/npm/v/@solidjs/router.svg?style=flat-square)](https://www.npmjs.org/package/@solidjs/router)
 
 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.
@@ -101,7 +98,7 @@ export default function App() {
 
 3. Lazy-load route components
 
-This way, the `Users` and `Home` components will only be loaded if you're navigating to `/users` or `/home`, respectively.
+This way, the `Users` and `Home` components will only be loaded if you're navigating to `/users` or `/`, respectively.
 
 ```jsx
 import { lazy } from "solid-js";
@@ -123,11 +120,11 @@ export default function App() {
 
 ## Create Links to Your Routes
 
-Use the `Link` component to create an anchor tag that takes you to a route:
+Use the `A` component to create an anchor tag that takes you to a route:
 
 ```jsx
 import { lazy } from "solid-js";
-import { Routes, Route, Link } from "@solidjs/router"
+import { Routes, Route, A } from "@solidjs/router"
 const Users = lazy(() => import("./pages/Users"));
 const Home = lazy(() => import("./pages/Home"));
 
@@ -135,8 +132,8 @@ export default function App() {
   return <>
     <h1>My Site with Lots of Pages</h1>
     <nav>
-      <Link href="/about">About</Link>
-      <Link href="/">Home</Link>
+      <A href="/about">About</A>
+      <A href="/">Home</A>
     </nav>
     <Routes>
       <Route path="/users" component={Users} />
@@ -147,33 +144,21 @@ export default function App() {
 }
 ```
 
-If you use `NavLink` instead of `Link`, the anchor tag will have an `active` class if its href matches the current location, and `inactive` otherwise. **Note:** By default matching includes locations that are descendents (eg. href `/users` matches locations `/users` and `/users/123`), use the boolean `end` prop to prevent matching these. This is particularly useful for links to the root route `/` which would match everything.
+The `<A>` tag also has an `active` class if its href matches the current location, and `inactive` otherwise. **Note:** By default matching includes locations that are descendents (eg. href `/users` matches locations `/users` and `/users/123`), use the boolean `end` prop to prevent matching these. This is particularly useful for links to the root route `/` which would match everything.
 
-Both of these components have these props:
 
 | prop     | type    | description                                                                                                                                                                              |
 |----------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | href     | string  | The path of the route to navigate to. This will be resolved relative to the route that the link is in, but you can preface it with `/` to refer back to the root.                                                                                                                                                    |
 | noScroll | boolean | If true, turn off the default behavior of scrolling to the top of the new page                                                                                                           |
 | replace  | boolean | If true, don't add a new entry to the browser history. (By default, the new page will be added to the browser history, so pressing the back button will take you to the previous route.) |
-| state    | unknown | [Push this value](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) to the history stack when navigating  |
-
-
-`NavLink` additionally has:
-
-| prop     | type    | description                                                                                                                                                                              |
-|----------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| state    | unknown | [Push this value](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) to the history stack when navigating  |                                      |
 | inactiveClass | string  | The class to show when the link is inactive (when the current location doesn't match the link) |
 | activeClass | string | The class to show when the link is active                                                                                                        |
 | end  | boolean | If `true`, only considers the link to be active when the curent location matches the `href` exactly; if `false`, check if the current location _starts with_ `href` |
 
-
-
-
-If you have a same-domain path that you want to link to _without_ going through the router, set `rel="external"` on the link component.
-
 ### The Navigate Component
-Solid Router provides a `Navigate` component that works similarly to `Link` and `NavLink`, but it will _immediately_ navigate to the provided path as soon as the component is rendered. It also uses the `href` prop, but you have the additional option of passing a function to `href` that returns a path to navigate to:
+Solid Router provides a `Navigate` component that works similarly to `A`, but it will _immediately_ navigate to the provided path as soon as the component is rendered. It also uses the `href` prop, but you have the additional option of passing a function to `href` that returns a path to navigate to:
 
 ```jsx
 function getPath ({navigate, location}) {
@@ -183,9 +168,7 @@ function getPath ({navigate, location}) {
 }
 
 //Navigating to /redirect will redirect you to the result of getPath
-<Route path="/redirect">
-  <Navigate href={getPath}/>
-</Route>
+<Route path="/redirect" element={<Navigate href={getPath}/>}/>
 ```
 
 ## Dynamic Routes
@@ -201,7 +184,7 @@ const Home = lazy(() => import("./pages/Home"));
 
 export default function App() {
   return <>
-    <h1>My Site with Lots of Pages<h1/>
+    <h1>My Site with Lots of Pages</h1>
     <Routes>
       <Route path="/users" component={Users} />
       <Route path="/users/:id" component={User} />
@@ -227,7 +210,7 @@ export default function User () {
 
   const [userData] = createResource(() => params.id, fetchUser);
 
-  return <a href={userData.twitter}>{userData.name}</a>
+  return <A href={userData.twitter}>{userData.name}</A>
 }
 ```
 
@@ -276,9 +259,9 @@ To do this, create a function that fetches and returns the data using `createRes
 ```js
 import { lazy } from "solid-js";
 import { Route } from "@solidjs/router";
-import { fetchUser } ... 
+import { fetchUser } ...
 
-const User = lazy(() => import("/pages/users/[id].js"));
+const User = lazy(() => import("./pages/users/[id].js"));
 
 //Data function
 function UserData({params, location, navigate, data}) {
@@ -364,7 +347,7 @@ function PageWrapper () {
   return <div>
     <h1> We love our users! </h1>
     <Outlet/>
-    <Link href="/">Back Home</Link>
+    <A href="/">Back Home</A>
   </div>
 }
 
@@ -404,7 +387,7 @@ You don't have to use JSX to set up your routes; you can pass an object directly
 ```jsx
 import { lazy } from "solid-js";
 import { render } from "solid-js/web";
-import { Router, useRoutes, Link } from "@solidjs/router";
+import { Router, useRoutes, A } from "@solidjs/router";
 
 const routes = [
   {
@@ -435,12 +418,12 @@ function App() {
   return (
     <>
       <h1>Awesome Site</h1>
-      <Link class="nav" href="/">
+      <A class="nav" href="/">
         Home
-      </Link>
-      <Link class="nav" href="/users">
+      </A>
+      <A class="nav" href="/users">
         Users
-      </Link>
+      </A>
       <Routes />
     </>
   );

package/dist/components.d.ts

@@ -6,6 +6,7 @@ declare module "solid-js" {
             state?: string;
             noScroll?: boolean;
             replace?: boolean;
+            link?: boolean;
         }
     }
 }
@@ -27,7 +28,7 @@ export interface RoutesProps {
     children: JSX.Element;
 }
 export declare const Routes: (props: RoutesProps) => JSX.Element;
-export declare const useRoutes: (routes: RouteDefinition | RouteDefinition[], base?: string | undefined) => () => JSX.Element;
+export declare const useRoutes: (routes: RouteDefinition | RouteDefinition[], base?: string) => () => JSX.Element;
 export declare type RouteProps = {
     path: string | string[];
     children?: JSX.Element;
@@ -42,19 +43,17 @@ export declare type RouteProps = {
 });
 export declare const Route: (props: RouteProps) => JSX.Element;
 export declare const Outlet: () => JSX.Element;
-export interface LinkProps extends Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "state"> {
+export interface AnchorProps extends Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "state"> {
     href: string;
     replace?: boolean;
     noScroll?: boolean;
     state?: unknown;
-}
-export declare function Link(props: LinkProps): JSX.Element;
-export interface NavLinkProps extends LinkProps {
     inactiveClass?: string;
     activeClass?: string;
     end?: boolean;
 }
-export declare function NavLink(props: NavLinkProps): JSX.Element;
+export declare function A(props: AnchorProps): JSX.Element;
+export { A as Link, A as NavLink, AnchorProps as LinkProps, AnchorProps as NavLinkProps };
 export interface NavigateProps {
     href: ((args: {
         navigate: Navigator;

package/dist/components.jsx

@@ -54,7 +54,7 @@ export const Routes = (props) => {
         return next;
     }));
     return (<Show when={routeStates() && root}>
-      {route => <RouteContextObj.Provider value={route}>{route.outlet()}</RouteContextObj.Provider>}
+      {((route) => (<RouteContextObj.Provider value={route}>{route.outlet()}</RouteContextObj.Provider>))}
     </Show>);
 };
 export const useRoutes = (routes, base) => {
@@ -71,36 +71,31 @@ export const Route = (props) => {
 export const Outlet = () => {
     const route = useRoute();
     return (<Show when={route.child}>
-      {child => <RouteContextObj.Provider value={child}>{child.outlet()}</RouteContextObj.Provider>}
+      {((child) => (<RouteContextObj.Provider value={child}>{child.outlet()}</RouteContextObj.Provider>))}
     </Show>);
 };
-function LinkBase(props) {
-    const [, rest] = splitProps(props, ["children", "to", "href", "state"]);
-    const href = useHref(() => props.to);
-    return (<a {...rest} href={href() || props.href} state={JSON.stringify(props.state)}>
-      {props.children}
-    </a>);
-}
-export function Link(props) {
-    const to = useResolvedPath(() => props.href);
-    return <LinkBase {...props} to={to()}/>;
-}
-export function NavLink(props) {
+export function A(props) {
     props = mergeProps({ inactiveClass: "inactive", activeClass: "active" }, props);
-    const [, rest] = splitProps(props, ["activeClass", "inactiveClass", "end"]);
-    const location = useLocation();
+    const [, rest] = splitProps(props, ["href", "state", "activeClass", "inactiveClass", "end"]);
     const to = useResolvedPath(() => props.href);
+    const href = useHref(to);
+    const location = useLocation();
     const isActive = createMemo(() => {
         const to_ = to();
-        if (to_ === undefined) {
+        if (to_ === undefined)
             return false;
-        }
         const path = to_.split(/[?#]/, 1)[0].toLowerCase();
         const loc = location.pathname.toLowerCase();
         return props.end ? path === loc : loc.startsWith(path);
     });
-    return (<LinkBase {...rest} to={to()} classList={{ [props.inactiveClass]: !isActive(), [props.activeClass]: isActive(), ...rest.classList }} aria-current={isActive() ? "page" : undefined}/>);
+    return (<a link {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{
+            [props.inactiveClass]: !isActive(),
+            [props.activeClass]: isActive(),
+            ...rest.classList
+        }} aria-current={isActive() ? "page" : undefined}/>);
 }
+// deprecated alias exports
+export { A as Link, A as NavLink };
 export function Navigate(props) {
     const navigate = useNavigate();
     const location = useLocation();

package/dist/index.js

@@ -1,5 +1,5 @@
-import { isServer, createComponent as createComponent$1, mergeProps as mergeProps$1, spread, insert, effect, setAttribute, template } from 'solid-js/web';
-import { createSignal, onCleanup, runWithOwner, createMemo, getOwner, createContext, useContext, untrack, useTransition, on, resetErrorBoundaries, createRenderEffect, createComponent, children, createRoot, Show, mergeProps, splitProps } from 'solid-js';
+import { isServer, delegateEvents, createComponent as createComponent$1, spread, effect, setAttribute, classList, 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';
 
 function bindEvent(target, type, handler) {
   target.addEventListener(type, handler);
@@ -307,10 +307,9 @@ const useSearchParams = () => {
 
   const setSearchParams = (params, options) => {
     const searchString = untrack(() => mergeSearchString(location.search, params));
-    navigate(searchString, {
+    navigate(location.pathname + searchString, {
       scroll: false,
-      ...options,
-      resolve: true
+      ...options
     });
   };
 
@@ -485,7 +484,18 @@ function createRouterContext(integration, base = "", data, out) {
     });
   }
 
-  const [isRouting, start] = useTransition();
+  const [isRouting, setIsRouting] = createSignal(false);
+
+  const start = async callback => {
+    setIsRouting(true);
+
+    try {
+      await startTransition(callback);
+    } finally {
+      setIsRouting(false);
+    }
+  };
+
   const [reference, setReference] = createSignal(source().value);
   const [state, setState] = createSignal(source().state);
   const location = createLocation(reference, state);
@@ -624,21 +634,15 @@ function createRouterContext(integration, base = "", data, out) {
   });
 
   if (!isServer) {
-    function isSvg(el) {
-      return el.namespaceURI === "http://www.w3.org/2000/svg";
-    }
-
     function handleAnchorClick(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;
+      if (!a || !a.hasAttribute("link")) return;
+      const href = a.href;
+      if (a.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);
+      const url = new URL(href);
       const pathname = urlDecode(url.pathname);
       if (url.origin !== window.location.origin || basePath && pathname && !pathname.toLowerCase().startsWith(basePath.toLowerCase())) return;
       const to = parsePath(pathname + urlDecode(url.search, true) + urlDecode(url.hash));
@@ -650,8 +654,10 @@ function createRouterContext(integration, base = "", data, out) {
         scroll: !a.hasAttribute("noscroll"),
         state: state && JSON.parse(state)
       });
-    }
+    } // ensure delegated events run first
 
+
+    delegateEvents(["click"]);
     document.addEventListener("click", handleAnchorClick);
     onCleanup(() => document.removeEventListener("click", handleAnchorClick));
   }
@@ -717,7 +723,7 @@ function createRouteContext(router, parent, child, match) {
   return route;
 }
 
-const _tmpl$ = /*#__PURE__*/template(`<a></a>`, 2);
+const _tmpl$ = /*#__PURE__*/template(`<a link></a>`, 2);
 const Router = props => {
   const {
     source,
@@ -841,80 +847,52 @@ const Outlet = () => {
     })
   });
 };
-
-function LinkBase(props) {
-  const [, rest] = splitProps(props, ["children", "to", "href", "state"]);
-  const href = useHref(() => props.to);
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    spread(_el$, rest, false, true);
-
-    insert(_el$, () => props.children);
-
-    effect(_p$ => {
-      const _v$ = href() || props.href,
-            _v$2 = JSON.stringify(props.state);
-
-      _v$ !== _p$._v$ && setAttribute(_el$, "href", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && setAttribute(_el$, "state", _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-
-    return _el$;
-  })();
-}
-
-function Link(props) {
-  const to = useResolvedPath(() => props.href);
-  return createComponent$1(LinkBase, mergeProps$1(props, {
-    get to() {
-      return to();
-    }
-
-  }));
-}
-function NavLink(props) {
+function A(props) {
   props = mergeProps({
     inactiveClass: "inactive",
     activeClass: "active"
   }, props);
-  const [, rest] = splitProps(props, ["activeClass", "inactiveClass", "end"]);
-  const location = useLocation();
+  const [, rest] = splitProps(props, ["href", "state", "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;
-    }
-
+    if (to_ === undefined) return false;
     const path = to_.split(/[?#]/, 1)[0].toLowerCase();
     const loc = location.pathname.toLowerCase();
     return props.end ? path === loc : loc.startsWith(path);
   });
-  return createComponent$1(LinkBase, mergeProps$1(rest, {
-    get to() {
-      return to();
-    },
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
 
-    get classList() {
-      return {
+    spread(_el$, rest, false, false);
+
+    effect(_p$ => {
+      const _v$ = href() || props.href,
+            _v$2 = JSON.stringify(props.state),
+            _v$3 = {
         [props.inactiveClass]: !isActive(),
         [props.activeClass]: isActive(),
         ...rest.classList
-      };
-    },
+      },
+            _v$4 = isActive() ? "page" : undefined;
 
-    get ["aria-current"]() {
-      return isActive() ? "page" : undefined;
-    }
+      _v$ !== _p$._v$ && setAttribute(_el$, "href", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && setAttribute(_el$, "state", _p$._v$2 = _v$2);
+      _p$._v$3 = classList(_el$, _v$3, _p$._v$3);
+      _v$4 !== _p$._v$4 && setAttribute(_el$, "aria-current", _p$._v$4 = _v$4);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined
+    });
 
-  }));
-}
+    return _el$;
+  })();
+} // deprecated alias exports
 function Navigate(props) {
   const navigate = useNavigate();
   const location = useLocation();
@@ -933,4 +911,4 @@ function Navigate(props) {
   return null;
 }
 
-export { Link, NavLink, Navigate, Outlet, Route, Router, Routes, mergeSearchString as _mergeSearchString, createIntegration, hashIntegration, normalizeIntegration, pathIntegration, staticIntegration, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useRouteData, useRoutes, useSearchParams };
+export { A, A as Link, A as NavLink, Navigate, Outlet, Route, Router, Routes, mergeSearchString as _mergeSearchString, createIntegration, hashIntegration, normalizeIntegration, pathIntegration, staticIntegration, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useRouteData, useRoutes, useSearchParams };

package/dist/routing.d.ts

@@ -13,7 +13,7 @@ export declare const useMatch: (path: () => string) => Accessor<import("./types"
 export declare const useParams: <T extends Params>() => T;
 declare type MaybeReturnType<T> = T extends (...args: any) => infer R ? R : T;
 export declare const useRouteData: <T>() => MaybeReturnType<T>;
-export declare const useSearchParams: <T extends Params>() => [T, (params: SetParams, options?: Partial<NavigateOptions<unknown>> | undefined) => void];
+export declare const useSearchParams: <T extends Params>() => [T, (params: SetParams, options?: Partial<NavigateOptions>) => void];
 export declare function createRoutes(routeDef: RouteDefinition, base?: string, fallback?: Component): Route[];
 export declare function createBranch(routes: Route[], index?: number): Branch;
 export declare function createBranches(routeDef: RouteDefinition | RouteDefinition[], base?: string, fallback?: Component, stack?: Route[], branches?: Branch[]): Branch[];

package/dist/routing.js

@@ -1,5 +1,5 @@
-import { createComponent, createContext, createMemo, createRenderEffect, createSignal, on, onCleanup, untrack, useContext, useTransition, resetErrorBoundaries } from "solid-js";
-import { isServer } from "solid-js/web";
+import { createComponent, createContext, createMemo, createRenderEffect, createSignal, on, onCleanup, untrack, useContext, startTransition, resetErrorBoundaries } from "solid-js";
+import { isServer, delegateEvents } from "solid-js/web";
 import { normalizeIntegration } from "./integration";
 import { createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, urlDecode, expandOptionals } from "./utils";
 const MAX_REDIRECTS = 100;
@@ -34,7 +34,7 @@ export const useSearchParams = () => {
     const navigate = useNavigate();
     const setSearchParams = (params, options) => {
         const searchString = untrack(() => mergeSearchString(location.search, params));
-        navigate(searchString, { scroll: false, ...options, resolve: true });
+        navigate(location.pathname + searchString, { scroll: false, ...options });
     };
     return [location.query, setSearchParams];
 };
@@ -179,7 +179,16 @@ export function createRouterContext(integration, base = "", data, out) {
     else if (basePath && !source().value) {
         setSource({ value: basePath, replace: true, scroll: false });
     }
-    const [isRouting, start] = useTransition();
+    const [isRouting, setIsRouting] = createSignal(false);
+    const start = async (callback) => {
+        setIsRouting(true);
+        try {
+            await startTransition(callback);
+        }
+        finally {
+            setIsRouting(false);
+        }
+    };
     const [reference, setReference] = createSignal(source().value);
     const [state, setState] = createSignal(source().state);
     const location = createLocation(reference, state);
@@ -292,9 +301,6 @@ export function createRouterContext(integration, base = "", data, out) {
         });
     });
     if (!isServer) {
-        function isSvg(el) {
-            return el.namespaceURI === "http://www.w3.org/2000/svg";
-        }
         function handleAnchorClick(evt) {
             if (evt.defaultPrevented ||
                 evt.button !== 0 ||
@@ -306,17 +312,15 @@ export function createRouterContext(integration, base = "", data, out) {
             const a = evt
                 .composedPath()
                 .find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
-            if (!a)
+            if (!a || !a.hasAttribute("link"))
                 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")))
+            const href = a.href;
+            if (a.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);
+            const url = new URL(href);
             const pathname = urlDecode(url.pathname);
             if (url.origin !== window.location.origin ||
                 (basePath && pathname && !pathname.toLowerCase().startsWith(basePath.toLowerCase())))
@@ -331,6 +335,8 @@ export function createRouterContext(integration, base = "", data, out) {
                 state: state && JSON.parse(state)
             });
         }
+        // ensure delegated events run first
+        delegateEvents(["click"]);
         document.addEventListener("click", handleAnchorClick);
         onCleanup(() => document.removeEventListener("click", handleAnchorClick));
     }

package/dist/types.d.ts

@@ -33,13 +33,13 @@ export interface RouterIntegration {
     signal: LocationChangeSignal;
     utils?: Partial<RouterUtils>;
 }
-export interface RouteDataFuncArgs {
-    data: unknown;
+export interface RouteDataFuncArgs<T = unknown> {
+    data: T extends RouteDataFunc ? ReturnType<T> : T;
     params: Params;
     location: Location;
     navigate: Navigator;
 }
-export declare type RouteDataFunc<T = unknown> = (args: RouteDataFuncArgs) => T;
+export declare type RouteDataFunc<T = unknown, R = unknown> = (args: RouteDataFuncArgs<T>) => R;
 export declare type RouteDefinition = {
     path: string | string[];
     data?: RouteDataFunc;

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -38,23 +38,24 @@
     "pretty": "prettier --write \"{src,test}/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-typescript": "^7.15.0",
-    "@rollup/plugin-babel": "5.3.0",
-    "@rollup/plugin-node-resolve": "13.0.5",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.10.3",
-    "babel-preset-solid": "^1.4.4",
-    "jest": "^27.2.5",
-    "prettier": "^2.5.1",
-    "rollup": "^2.52.1",
+    "@babel/core": "^7.18.13",
+    "@babel/preset-typescript": "^7.18.6",
+    "@rollup/plugin-babel": "5.3.1",
+    "@rollup/plugin-node-resolve": "13.3.0",
+    "@types/jest": "^29.0.0",
+    "@types/node": "^18.7.14",
+    "babel-preset-solid": "^1.5.3",
+    "jest": "^29.0.1",
+    "jest-environment-jsdom": "^29.1.2",
+    "prettier": "^2.7.1",
+    "rollup": "^2.79.0",
     "rollup-plugin-terser": "^7.0.2",
     "solid-jest": "^0.2.0",
-    "solid-js": "^1.4.4",
-    "typescript": "^4.5.4"
+    "solid-js": "^1.5.3",
+    "typescript": "^4.8.2"
   },
   "peerDependencies": {
-    "solid-js": "^1.3.5"
+    "solid-js": "^1.5.3"
   },
   "jest": {
     "preset": "solid-jest/preset/browser"