Compare commits
9 Commits
Author | SHA1 | Date | |
---|---|---|---|
2f8247b3d5 | |||
57d129e9b8 | |||
87be53841b | |||
4c27d17769 | |||
ba1ef2d32c | |||
ab5298c5a0 | |||
c74c4e78a6 | |||
fa8ec78c1c | |||
bd943726eb |
33
changelog.md
33
changelog.md
@@ -1,5 +1,38 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## 2025-07-25 - 1.3.3 - fix(dependencies)
|
||||||
|
Updated dependencies and improved documentation
|
||||||
|
|
||||||
|
- Updated devDependencies: @git.zone/tsbuild, @git.zone/tsbundle, @git.zone/tstest to latest versions
|
||||||
|
- Removed @push.rocks/tapbundle dependency and updated test imports to use tapbundle from tstest
|
||||||
|
- Updated dependencies: @push.rocks/lik and @push.rocks/smartrx to latest versions
|
||||||
|
- Added packageManager field to package.json for pnpm
|
||||||
|
- Enhanced documentation with new examples for state data, query parameters, sub-routers, and cleanup
|
||||||
|
- Added verbose flag to test script
|
||||||
|
|
||||||
|
## 2024-10-06 - 1.3.2 - fix(core)
|
||||||
|
Fix TypeScript type definition for route match function
|
||||||
|
|
||||||
|
- Updated the type definition for the matchFunction in the SmartRouter class to include a generic parameter.
|
||||||
|
|
||||||
|
## 2024-10-06 - 1.3.1 - fix(dependencies)
|
||||||
|
Updated dependencies to latest versions, resolving compatibility issues and improving performance.
|
||||||
|
|
||||||
|
- Updated devDependencies to their latest versions, including tsbuild, tsbundle, tstest, tapbundle, and @types/node
|
||||||
|
- Updated dependencies to latest versions of lik, smartrx, and path-to-regexp
|
||||||
|
|
||||||
|
## 2024-10-06 - 1.3.0 - feat(smartrouter)
|
||||||
|
Add destroy method to SmartRouter class.
|
||||||
|
|
||||||
|
- Introduced a destroy method to the SmartRouter class for cleaning up event listeners and route references.
|
||||||
|
- Refactored popstate event listener to be removable, improving resource management and preventing memory leaks.
|
||||||
|
|
||||||
|
## 2024-10-06 - 1.2.1 - fix(core)
|
||||||
|
Ensure stability and performance improvements
|
||||||
|
|
||||||
|
- Improves platform compatibility for modern web applications.
|
||||||
|
- Enhances stability of the routing logic within SmartRouter class.
|
||||||
|
|
||||||
## 2024-10-06 - 1.2.0 - feat(core)
|
## 2024-10-06 - 1.2.0 - feat(core)
|
||||||
Add support for base paths and sub-routers.
|
Add support for base paths and sub-routers.
|
||||||
|
|
||||||
|
22
package.json
22
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@push.rocks/smartrouter",
|
"name": "@push.rocks/smartrouter",
|
||||||
"version": "1.2.0",
|
"version": "1.3.3",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "A JavaScript library providing routing capabilities for web applications.",
|
"description": "A JavaScript library providing routing capabilities for web applications.",
|
||||||
"main": "dist_ts/index.js",
|
"main": "dist_ts/index.js",
|
||||||
@@ -8,22 +8,21 @@
|
|||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "(tstest test/)",
|
"test": "(tstest test/ --verbose)",
|
||||||
"build": "(tsbuild --web && tsbundle npm --web)",
|
"build": "(tsbuild --web && tsbundle npm --web)",
|
||||||
"format": "(gitzone format)",
|
"format": "(gitzone format)",
|
||||||
"buildDocs": "tsdoc"
|
"buildDocs": "tsdoc"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@git.zone/tsbuild": "^2.1.70",
|
"@git.zone/tsbuild": "^2.6.4",
|
||||||
"@git.zone/tsbundle": "^2.0.7",
|
"@git.zone/tsbundle": "^2.5.1",
|
||||||
"@git.zone/tstest": "^1.0.81",
|
"@git.zone/tstest": "^2.3.2",
|
||||||
"@push.rocks/tapbundle": "^5.0.15",
|
"@types/node": "^22.7.4"
|
||||||
"@types/node": "^20.6.0"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@push.rocks/lik": "^6.0.5",
|
"@push.rocks/lik": "^6.2.2",
|
||||||
"@push.rocks/smartrx": "^3.0.6",
|
"@push.rocks/smartrx": "^3.0.10",
|
||||||
"path-to-regexp": "^6.2.0"
|
"path-to-regexp": "^8.2.0"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"ts/**/*",
|
"ts/**/*",
|
||||||
@@ -54,5 +53,6 @@
|
|||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://code.foss.global/push.rocks/smartrouter.git"
|
"url": "https://code.foss.global/push.rocks/smartrouter.git"
|
||||||
}
|
},
|
||||||
|
"packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
|
||||||
}
|
}
|
||||||
|
12004
pnpm-lock.yaml
generated
12004
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
69
readme.md
69
readme.md
@@ -1,10 +1,10 @@
|
|||||||
# @push.rocks/smartrouter
|
# @push.rocks/smartrouter
|
||||||
a router for routing on websites
|
A JavaScript library providing routing capabilities for web applications with support for path parameters, query parameters, and programmatic navigation
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
To install `@push.rocks/smartrouter`, run the following command in your project directory:
|
To install `@push.rocks/smartrouter`, run the following command in your project directory:
|
||||||
```sh
|
```sh
|
||||||
npm install @push.rocks/smartrouter --save
|
pnpm install @push.rocks/smartrouter --save
|
||||||
```
|
```
|
||||||
|
|
||||||
This will add `@push.rocks/smartrouter` to your project's dependencies and enable you to use it within your application.
|
This will add `@push.rocks/smartrouter` to your project's dependencies and enable you to use it within your application.
|
||||||
@@ -73,45 +73,70 @@ router.pushUrl('/about');
|
|||||||
|
|
||||||
// Navigate to a user profile with URL parameters
|
// Navigate to a user profile with URL parameters
|
||||||
router.pushUrl('/user/12345');
|
router.pushUrl('/user/12345');
|
||||||
|
|
||||||
|
// Navigate with state data
|
||||||
|
router.pushUrl('/dashboard', { previousPage: 'home' });
|
||||||
```
|
```
|
||||||
|
|
||||||
### Managing Query Parameters
|
### Managing Query Parameters
|
||||||
`@push.rocks/smartrouter` provides methods for managing URL query parameters, enabling dynamic URL manipulation for filter settings, pagination, and other use cases.
|
`@push.rocks/smartrouter` provides methods for managing URL query parameters, enabling dynamic URL manipulation for filter settings, pagination, and other use cases.
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
// Set a query parameter
|
// Set a query parameter (replace by default)
|
||||||
router.queryParams.setQueryParam('key', 'value');
|
router.queryParams.setQueryParam('key', 'value');
|
||||||
|
|
||||||
|
// Set a query parameter with push (adds to history)
|
||||||
|
router.queryParams.setQueryParam('key', 'value', 'push');
|
||||||
|
|
||||||
// Get a query parameter
|
// Get a query parameter
|
||||||
const value = router.queryParams.getQueryParam('key');
|
const value = router.queryParams.getQueryParam('key');
|
||||||
|
|
||||||
|
// Get all query parameters as an object
|
||||||
|
const allParams = router.queryParams.getAllAsObject();
|
||||||
|
|
||||||
// Delete a query parameter
|
// Delete a query parameter
|
||||||
router.queryParams.deleteQueryParam('key');
|
router.queryParams.deleteQueryParam('key');
|
||||||
|
|
||||||
|
// Delete with push to history
|
||||||
|
router.queryParams.deleteQueryParam('key', 'push');
|
||||||
```
|
```
|
||||||
|
|
||||||
### Selection Dimensions
|
### Sub-Routers
|
||||||
`@push.rocks/smartrouter` introduces the concept of selection dimensions, allowing you to manage stateful selections across routes. This is especially useful for complex navigation flows that depend on prior selections.
|
Create sub-routers with a specific base path for modular routing:
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
await router.createSelectionDimension({
|
// Create a sub-router for admin routes
|
||||||
routeArg: '/select/:option',
|
const adminRouter = router.createSubRouter('/admin');
|
||||||
keyArg: 'mySelection',
|
|
||||||
options: [
|
// Routes will be prefixed with /admin
|
||||||
{
|
adminRouter.on('/dashboard', async (routeInfo) => {
|
||||||
key: 'option1',
|
// This handles /admin/dashboard
|
||||||
detail: { /* some data */ },
|
|
||||||
action: async () => { /* action for option1 */ }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'option2',
|
|
||||||
detail: { /* some data */ },
|
|
||||||
action: async () => { /* action for option2 */ }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Navigate to a selection option
|
adminRouter.on('/users', async (routeInfo) => {
|
||||||
router.pushUrl('/select/option1');
|
// This handles /admin/users
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Route Management
|
||||||
|
The `on` method returns a function that can be used to remove the route:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Add a route
|
||||||
|
const removeRoute = router.on('/temporary', async (routeInfo) => {
|
||||||
|
console.log('Temporary route accessed');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Later, remove the route
|
||||||
|
removeRoute();
|
||||||
|
```
|
||||||
|
|
||||||
|
### Cleanup
|
||||||
|
When you're done with a router instance, clean it up properly:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Destroy the router, removing all event listeners and routes
|
||||||
|
router.destroy();
|
||||||
```
|
```
|
||||||
|
|
||||||
This module enables complex routing scenarios, simplifying the handling of navigational logic in modern web applications. By leveraging `@push.rocks/smartrouter`, developers can implement detailed routing mechanisms, manipulate browser history thoughtfully, and maintain cleaner URL structures, enhancing the user experience and making web apps more accessible.
|
This module enables complex routing scenarios, simplifying the handling of navigational logic in modern web applications. By leveraging `@push.rocks/smartrouter`, developers can implement detailed routing mechanisms, manipulate browser history thoughtfully, and maintain cleaner URL structures, enhancing the user experience and making web apps more accessible.
|
||||||
|
@@ -1,4 +1,4 @@
|
|||||||
import { expect, expectAsync, tap } from '@push.rocks/tapbundle';
|
import { expect, tap } from '@git.zone/tstest/tapbundle';
|
||||||
import * as smartrouter from '../ts/index.js';
|
import * as smartrouter from '../ts/index.js';
|
||||||
|
|
||||||
let testrouter: smartrouter.SmartRouter;
|
let testrouter: smartrouter.SmartRouter;
|
||||||
|
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@push.rocks/smartrouter',
|
name: '@push.rocks/smartrouter',
|
||||||
version: '1.2.0',
|
version: '1.3.2',
|
||||||
description: 'A JavaScript library providing routing capabilities for web applications.'
|
description: 'A JavaScript library providing routing capabilities for web applications.'
|
||||||
}
|
}
|
||||||
|
@@ -32,7 +32,7 @@ export class SmartRouter {
|
|||||||
* the routes we are handling
|
* the routes we are handling
|
||||||
*/
|
*/
|
||||||
public routes: Array<{
|
public routes: Array<{
|
||||||
matchFunction: plugins.pathToRegExp.MatchFunction;
|
matchFunction: plugins.pathToRegExp.MatchFunction<any>;
|
||||||
handler: THandlerFunction;
|
handler: THandlerFunction;
|
||||||
}> = [];
|
}> = [];
|
||||||
|
|
||||||
@@ -41,6 +41,11 @@ export class SmartRouter {
|
|||||||
*/
|
*/
|
||||||
private basePath: string;
|
private basePath: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reference to the event listener function for cleanup
|
||||||
|
*/
|
||||||
|
private popstateListener: (event: PopStateEvent) => void;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates an instance of Router.
|
* Creates an instance of Router.
|
||||||
*/
|
*/
|
||||||
@@ -53,10 +58,11 @@ export class SmartRouter {
|
|||||||
this.basePath = basePath;
|
this.basePath = basePath;
|
||||||
|
|
||||||
// lets subscribe to route changes
|
// lets subscribe to route changes
|
||||||
window.addEventListener('popstate', (popStateEventArg) => {
|
this.popstateListener = (popStateEventArg) => {
|
||||||
popStateEventArg.preventDefault();
|
popStateEventArg.preventDefault();
|
||||||
this._handleRouteState();
|
this._handleRouteState();
|
||||||
});
|
};
|
||||||
|
window.addEventListener('popstate', this.popstateListener);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -119,4 +125,14 @@ export class SmartRouter {
|
|||||||
} as IRouteInfo); // not waiting here
|
} as IRouteInfo); // not waiting here
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Destroy the router instance, removing all external references
|
||||||
|
*/
|
||||||
|
public destroy() {
|
||||||
|
// Remove the event listener for popstate
|
||||||
|
window.removeEventListener('popstate', this.popstateListener);
|
||||||
|
// Clear all routes
|
||||||
|
this.routes = [];
|
||||||
|
}
|
||||||
}
|
}
|
Reference in New Issue
Block a user