solid-navigator 0.1.0 → 0.2.1

package/README.md

@@ -6,7 +6,7 @@
 
 [![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
 
-Solid Navigator is a library that is inspired by vue router and solid router.
+Solid Navigator is a library that is inspired by vue-router and @solidjs/router.
 
 
 ## Quick start
@@ -22,7 +22,7 @@ pnpm add solid-navigator
 Use it:
 
 ```tsx
-import { useNavigate, Outlet, Route, Router, useLocation, useParams, A } from 'solid-navigator'
+import { Router, Route, Outlet, A, Navigate, useNavigate, useLocation, useParams,  useMatch, useSearchParams } from 'solid-navigator'
 ```
 
 
@@ -65,6 +65,17 @@ const match = useMatch(() => "/chats/1234");
 } | null
 ```
 
+### `useSearchParams`
+```js
+// path: /chats?id=1234
+const [params, setParams] = useSearchParams();
+params = {
+  id: "1234"
+} | null
+
+setParams({id: "5678", hello: "Bye"}) // path: /chats?id=5678&hello=Bye
+```
+
 ## Components
 
 ### `Router`  

package/dist/dev.js

@@ -58,8 +58,7 @@ function matchSegment(input, filter) {
   }
   return false;
 }
-var createLocation = (path) => {
-  const [query, setQuery] = createStore({});
+var createLocation = (path, query, setQuery) => {
   const url = createMemo(() => {
     return new URL(path(), "http://owo");
   });
@@ -109,8 +108,9 @@ function Router(props) {
   const [pathname, setPathname] = createSignal(location.pathname);
   const [hashAndSearch, setHashAndSearch] = createSignal(getHashAndSearch());
   const [params, setParams] = createStore({});
+  const [query, setQuery] = createStore({});
   const pathnameWithHashAndSearch = createMemo(() => pathname() + hashAndSearch());
-  const loc = createLocation(pathnameWithHashAndSearch);
+  const loc = createLocation(pathnameWithHashAndSearch, query, setQuery);
   const matched = createMemo(() => {
     if (!routes())
       return;
@@ -140,8 +140,8 @@ function Router(props) {
     setHashAndSearch(getHashAndSearch());
   };
   const onClick = (event) => {
-    const target = event.target;
-    if (target.tagName !== "A")
+    const target = event.composedPath().find((el) => el instanceof Node && el.nodeName.toUpperCase() === "A");
+    if (target?.tagName !== "A")
       return;
     if (!target.hasAttribute("sn-link"))
       return;
@@ -167,7 +167,9 @@ function Router(props) {
       params,
       location: loc,
       setHashAndSearch,
-      setPathname
+      setPathname,
+      setQuery,
+      query
     },
     get children() {
       return props.root?.();
@@ -235,8 +237,6 @@ var flattenedRoute = (route) => {
   }
   return routes;
 };
-
-// src/navigator.ts
 var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
   return (path, options) => {
     let newPath = path;
@@ -269,6 +269,18 @@ var Navigate = (props) => {
   navigate(props.href, { replace: true });
   return null;
 };
+var useSearchParams = () => {
+  const context = useRouterContext();
+  const navigate = useNavigate();
+  const updateQuery = (query) => {
+    context.setQuery(reconcile(query));
+    const url = new URL(window.location.href);
+    const newSearch = new URLSearchParams(context.query);
+    url.search = newSearch.toString();
+    navigate(url.pathname + url.search + url.hash);
+  };
+  return [context.location.query, updateQuery];
+};
 var Fragment = () => [];
 var Outlet = (props) => {
   const context = useRouterContext();
@@ -316,4 +328,4 @@ var useMatch = (path) => {
   return createMemo(() => matcher()(context.location.pathname));
 };
 
-export { A, Navigate, Outlet, Route, Router, useLocation, useMatch, useNavigate, useParams };
+export { A, Navigate, Outlet, Route, Router, useLocation, useMatch, useNavigate, useParams, useSearchParams };

package/dist/dev.jsx

@@ -67,9 +67,8 @@ function matchSegment(input, filter) {
 
 // src/createLocation.ts
 import { createEffect, createMemo, on } from "solid-js";
-import { createStore, reconcile } from "solid-js/store";
-var createLocation = (path) => {
-  const [query, setQuery] = createStore({});
+import { reconcile } from "solid-js/store";
+var createLocation = (path, query, setQuery) => {
   const url = createMemo(() => {
     return new URL(path(), "http://owo");
   });
@@ -119,8 +118,9 @@ function Router(props) {
   const [pathname, setPathname] = createSignal(location.pathname);
   const [hashAndSearch, setHashAndSearch] = createSignal(getHashAndSearch());
   const [params, setParams] = createStore2({});
+  const [query, setQuery] = createStore2({});
   const pathnameWithHashAndSearch = createMemo2(() => pathname() + hashAndSearch());
-  const loc = createLocation(pathnameWithHashAndSearch);
+  const loc = createLocation(pathnameWithHashAndSearch, query, setQuery);
   const matched = createMemo2(() => {
     if (!routes())
       return;
@@ -147,8 +147,8 @@ function Router(props) {
     setHashAndSearch(getHashAndSearch());
   };
   const onClick = (event) => {
-    const target = event.target;
-    if (target.tagName !== "A")
+    const target = event.composedPath().find((el) => el instanceof Node && el.nodeName.toUpperCase() === "A");
+    if (target?.tagName !== "A")
       return;
     if (!target.hasAttribute("sn-link"))
       return;
@@ -167,7 +167,17 @@ function Router(props) {
     });
   });
   return <RouterContext.Provider
-    value={{ routes, matched, navigate, params, location: loc, setHashAndSearch, setPathname }}
+    value={{
+      routes,
+      matched,
+      navigate,
+      params,
+      location: loc,
+      setHashAndSearch,
+      setPathname,
+      setQuery,
+      query
+    }}
   >{props.root?.()}</RouterContext.Provider>;
 }
 var useRouterContext = () => {
@@ -231,6 +241,7 @@ var flattenedRoute = (route) => {
 };
 
 // src/navigator.ts
+import { reconcile as reconcile3 } from "solid-js/store";
 var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
   return (path, options) => {
     let newPath = path;
@@ -263,6 +274,18 @@ var Navigate = (props) => {
   navigate(props.href, { replace: true });
   return null;
 };
+var useSearchParams = () => {
+  const context = useRouterContext();
+  const navigate = useNavigate();
+  const updateQuery = (query) => {
+    context.setQuery(reconcile3(query));
+    const url = new URL(window.location.href);
+    const newSearch = new URLSearchParams(context.query);
+    url.search = newSearch.toString();
+    navigate(url.pathname + url.search + url.hash);
+  };
+  return [context.location.query, updateQuery];
+};
 
 // src/Outlet.tsx
 import { createMemo as createMemo3 } from "solid-js";
@@ -322,5 +345,6 @@ export {
   useLocation,
   useMatch,
   useNavigate,
-  useParams
+  useParams,
+  useSearchParams
 };

package/dist/index.d.ts

@@ -18,6 +18,7 @@ declare const useNavigate: () => (path: string, options?: NavigateOptions | unde
 declare const Navigate: (props: {
     href: string;
 }) => null;
+declare const useSearchParams: () => readonly [Record<string, string>, (query: Record<string, string>) => void];
 
 declare const Outlet: (props: {
     children?: string;
@@ -49,4 +50,4 @@ type LinkProps = {
 declare const A: (props: LinkProps) => JSX.Element;
 declare const useMatch: (path: () => string) => solid_js.Accessor<PathMatch | null>;
 
-export { A, Navigate, type NavigateOptions, Outlet, Route, type RouteObject, Router, type RouterProps, useLocation, useMatch, useNavigate, useParams };
+export { A, Navigate, type NavigateOptions, Outlet, Route, type RouteObject, Router, type RouterProps, useLocation, useMatch, useNavigate, useParams, useSearchParams };

package/dist/index.js

@@ -58,8 +58,7 @@ function matchSegment(input, filter) {
   }
   return false;
 }
-var createLocation = (path) => {
-  const [query, setQuery] = createStore({});
+var createLocation = (path, query, setQuery) => {
   const url = createMemo(() => {
     return new URL(path(), "http://owo");
   });
@@ -109,8 +108,9 @@ function Router(props) {
   const [pathname, setPathname] = createSignal(location.pathname);
   const [hashAndSearch, setHashAndSearch] = createSignal(getHashAndSearch());
   const [params, setParams] = createStore({});
+  const [query, setQuery] = createStore({});
   const pathnameWithHashAndSearch = createMemo(() => pathname() + hashAndSearch());
-  const loc = createLocation(pathnameWithHashAndSearch);
+  const loc = createLocation(pathnameWithHashAndSearch, query, setQuery);
   const matched = createMemo(() => {
     if (!routes())
       return;
@@ -140,8 +140,8 @@ function Router(props) {
     setHashAndSearch(getHashAndSearch());
   };
   const onClick = (event) => {
-    const target = event.target;
-    if (target.tagName !== "A")
+    const target = event.composedPath().find((el) => el instanceof Node && el.nodeName.toUpperCase() === "A");
+    if (target?.tagName !== "A")
       return;
     if (!target.hasAttribute("sn-link"))
       return;
@@ -167,7 +167,9 @@ function Router(props) {
       params,
       location: loc,
       setHashAndSearch,
-      setPathname
+      setPathname,
+      setQuery,
+      query
     },
     get children() {
       return props.root?.();
@@ -235,8 +237,6 @@ var flattenedRoute = (route) => {
   }
   return routes;
 };
-
-// src/navigator.ts
 var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
   return (path, options) => {
     let newPath = path;
@@ -268,6 +268,18 @@ var Navigate = (props) => {
   navigate(props.href, { replace: true });
   return null;
 };
+var useSearchParams = () => {
+  const context = useRouterContext();
+  const navigate = useNavigate();
+  const updateQuery = (query) => {
+    context.setQuery(reconcile(query));
+    const url = new URL(window.location.href);
+    const newSearch = new URLSearchParams(context.query);
+    url.search = newSearch.toString();
+    navigate(url.pathname + url.search + url.hash);
+  };
+  return [context.location.query, updateQuery];
+};
 var Fragment = () => [];
 var Outlet = (props) => {
   const context = useRouterContext();
@@ -313,4 +325,4 @@ var useMatch = (path) => {
   return createMemo(() => matcher()(context.location.pathname));
 };
 
-export { A, Navigate, Outlet, Route, Router, useLocation, useMatch, useNavigate, useParams };
+export { A, Navigate, Outlet, Route, Router, useLocation, useMatch, useNavigate, useParams, useSearchParams };

package/dist/index.jsx

@@ -67,9 +67,8 @@ function matchSegment(input, filter) {
 
 // src/createLocation.ts
 import { createEffect, createMemo, on } from "solid-js";
-import { createStore, reconcile } from "solid-js/store";
-var createLocation = (path) => {
-  const [query, setQuery] = createStore({});
+import { reconcile } from "solid-js/store";
+var createLocation = (path, query, setQuery) => {
   const url = createMemo(() => {
     return new URL(path(), "http://owo");
   });
@@ -119,8 +118,9 @@ function Router(props) {
   const [pathname, setPathname] = createSignal(location.pathname);
   const [hashAndSearch, setHashAndSearch] = createSignal(getHashAndSearch());
   const [params, setParams] = createStore2({});
+  const [query, setQuery] = createStore2({});
   const pathnameWithHashAndSearch = createMemo2(() => pathname() + hashAndSearch());
-  const loc = createLocation(pathnameWithHashAndSearch);
+  const loc = createLocation(pathnameWithHashAndSearch, query, setQuery);
   const matched = createMemo2(() => {
     if (!routes())
       return;
@@ -147,8 +147,8 @@ function Router(props) {
     setHashAndSearch(getHashAndSearch());
   };
   const onClick = (event) => {
-    const target = event.target;
-    if (target.tagName !== "A")
+    const target = event.composedPath().find((el) => el instanceof Node && el.nodeName.toUpperCase() === "A");
+    if (target?.tagName !== "A")
       return;
     if (!target.hasAttribute("sn-link"))
       return;
@@ -167,7 +167,17 @@ function Router(props) {
     });
   });
   return <RouterContext.Provider
-    value={{ routes, matched, navigate, params, location: loc, setHashAndSearch, setPathname }}
+    value={{
+      routes,
+      matched,
+      navigate,
+      params,
+      location: loc,
+      setHashAndSearch,
+      setPathname,
+      setQuery,
+      query
+    }}
   >{props.root?.()}</RouterContext.Provider>;
 }
 var useRouterContext = () => {
@@ -231,6 +241,7 @@ var flattenedRoute = (route) => {
 };
 
 // src/navigator.ts
+import { reconcile as reconcile3 } from "solid-js/store";
 var createNavigate = (routes, pathname, setPathname, setHashAndSearch) => {
   return (path, options) => {
     let newPath = path;
@@ -262,6 +273,18 @@ var Navigate = (props) => {
   navigate(props.href, { replace: true });
   return null;
 };
+var useSearchParams = () => {
+  const context = useRouterContext();
+  const navigate = useNavigate();
+  const updateQuery = (query) => {
+    context.setQuery(reconcile3(query));
+    const url = new URL(window.location.href);
+    const newSearch = new URLSearchParams(context.query);
+    url.search = newSearch.toString();
+    navigate(url.pathname + url.search + url.hash);
+  };
+  return [context.location.query, updateQuery];
+};
 
 // src/Outlet.tsx
 import { createMemo as createMemo3 } from "solid-js";
@@ -319,5 +342,6 @@ export {
   useLocation,
   useMatch,
   useNavigate,
-  useParams
+  useParams,
+  useSearchParams
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-navigator",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Solid Navigator is a library that is inspired by vue router and solid router.",
   "license": "MIT",
   "author": "SupertigerDev",