@fruit-ui/router 1.1.2 → 1.1.3

package/README.md

@@ -17,21 +17,30 @@ Here is an example router:
 ```js
 import * as router from "@fruit-ui/router";
 
-const router = router.Router({
-    '': () => HomePage,
-    'about': () => AboutPage,
-    'contact': () => ContactPage,
-    '*': (page) => ({children: [{tag: 'h2', children: '404'}, {tag: 'p', children: `The page "${page}" does not exist.`}]})
-}, {
-    hashed: {behavior: 'smooth'}, 
-    unhashed: {behavior: 'smooth', to: {x: 0, y: 0}}
-})
+const myRouter = router.Router(
+    {
+        '': {route: () => HomePage},
+        'about': {route: () => AboutPage},
+        'contact': {route: () => ContactPage},
+        '*': {route: (path) => ({
+            children: [
+                {tag: 'h2', children: '404'}, 
+                {tag: 'p', children: `The page "${path}" does not exist.`}
+            ]
+        })}
+    }, {
+        hashed: {behavior: 'smooth'}, 
+        unhashed: {behavior: 'smooth', to: {x: 0, y: 0}}
+    }
+);
 ```
 
 ## The `navigate` function
 
 The `navigate` function takes in a path and navigates to that path. Navigation is done with `history.pushState` so it is compatible with the browser forward/back methods. You can navigate to hashed paths (i.e., `navigate('/about#contact')`) to automatically scroll to a certain element ID, depending on scroll settings. Navigate does nothing (and no `pagechange` event is dispatched) if the given and existing paths are the same.
 
+`navigate` also takes an optional object `searchParams` representing any other search params to be used.
+
 ### The `navigateHash` function
 
 The `navigateHash` function navigates to a different hash on the same page, i.e., `navigate('#contact')`. This is done with `history.pushState` so it is compatible with the browser forward/back methods. If the given and existing hashes are the same, the `hashchange` event is still dispatched (see below).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fruit-ui/router",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A basic router component for FRUIT",
   "main": "src/router.js",
   "homepage": "https://asantagata.github.io/fruit-ui/?page=router-index",

package/src/router.js

@@ -127,8 +127,9 @@ function Router(routes, scrollOptions = {hashed: {}, unhashed: {to: {x: 0, y: 0}
 /**
  * Navigates to a page.
  * @param {string} page - the page.
+ * @param {Object.<string, string>} [searchParams] - other search params.
  */
-function navigate(page) {
+function navigate(page, searchParams = {}) {
     if (page.startsWith('/')) page = page.slice(1);
     let hash = '';
     if (page.includes('#')) {
@@ -137,7 +138,11 @@ function navigate(page) {
     }
     if (page === getPage()) return;
     const url = new URL(window.location.href);
+    url.search = '';
     url.searchParams.set(PARAM_NAME, page);
+    Object.keys(searchParams).forEach(key => {
+        url.searchParams.set(key, searchParams[key]);
+    });
     url.hash = hash;
     window.history.pushState({}, '', url);
     broadcastPageChange(page);