@solidjs/router 0.4.3 → 0.5.0

package/README.md

@@ -98,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";
@@ -120,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"));
 
@@ -132,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} />
@@ -144,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}) {
@@ -180,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
@@ -198,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} />
@@ -224,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>
 }
 ```
 
@@ -273,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}) {
@@ -361,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>
 }
 
@@ -401,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 = [
   {
@@ -432,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, delegateEvents, 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));
@@ -719,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,
@@ -843,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();
@@ -935,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,4 +1,4 @@
-import { createComponent, createContext, createMemo, createRenderEffect, createSignal, on, onCleanup, untrack, useContext, useTransition, resetErrorBoundaries } from "solid-js";
+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";
@@ -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())))

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.4.3",
+  "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"