@fruit-ui/router 1.1.2 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +19 -10
  2. package/package.json +1 -1
  3. package/src/router.js +6 -2
package/README.md CHANGED
@@ -17,20 +17,29 @@ Here is an example router:
17
17
  ```js
18
18
  import * as router from "@fruit-ui/router";
19
19
 
20
- const router = router.Router({
21
- '': () => HomePage,
22
- 'about': () => AboutPage,
23
- 'contact': () => ContactPage,
24
- '*': (page) => ({children: [{tag: 'h2', children: '404'}, {tag: 'p', children: `The page "${page}" does not exist.`}]})
25
- }, {
26
- hashed: {behavior: 'smooth'},
27
- unhashed: {behavior: 'smooth', to: {x: 0, y: 0}}
28
- })
20
+ const myRouter = router.Router(
21
+ {
22
+ '': {route: () => HomePage},
23
+ 'about': {route: () => AboutPage},
24
+ 'contact': {route: () => ContactPage},
25
+ '*': {route: (path) => ({
26
+ children: [
27
+ {tag: 'h2', children: '404'},
28
+ {tag: 'p', children: `The page "${path}" does not exist.`}
29
+ ]
30
+ })}
31
+ }, {
32
+ hashed: {behavior: 'smooth'},
33
+ unhashed: {behavior: 'smooth', to: {x: 0, y: 0}}
34
+ }
35
+ );
29
36
  ```
30
37
 
31
38
  ## The `navigate` function
32
39
 
33
- 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.
40
+ 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.
41
+
42
+ `navigate` also takes an optional object `searchParams` representing any other search params to be used.
34
43
 
35
44
  ### The `navigateHash` function
36
45
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fruit-ui/router",
3
- "version": "1.1.2",
3
+ "version": "1.1.4",
4
4
  "description": "A basic router component for FRUIT",
5
5
  "main": "src/router.js",
6
6
  "homepage": "https://asantagata.github.io/fruit-ui/?page=router-index",
package/src/router.js CHANGED
@@ -127,17 +127,21 @@ function Router(routes, scrollOptions = {hashed: {}, unhashed: {to: {x: 0, y: 0}
127
127
  /**
128
128
  * Navigates to a page.
129
129
  * @param {string} page - the page.
130
+ * @param {Object.<string, string>} [searchParams] - other search params.
130
131
  */
131
- function navigate(page) {
132
+ function navigate(page, searchParams = {}) {
132
133
  if (page.startsWith('/')) page = page.slice(1);
133
134
  let hash = '';
134
135
  if (page.includes('#')) {
135
136
  hash = page.slice(page.indexOf('#'));
136
137
  page = page.slice(0, page.indexOf('#'));
137
138
  }
138
- if (page === getPage()) return;
139
139
  const url = new URL(window.location.href);
140
+ url.search = '';
140
141
  url.searchParams.set(PARAM_NAME, page);
142
+ Object.keys(searchParams).forEach(key => {
143
+ url.searchParams.set(key, searchParams[key]);
144
+ });
141
145
  url.hash = hash;
142
146
  window.history.pushState({}, '', url);
143
147
  broadcastPageChange(page);