The @jamilservices/sb-module-router
is designed to provide a robust and flexible routing system for web applications built with SimplyBuilder. It integrates seamlessly with the SimplyBuilder environment, allowing developers to manage route changes, state transitions, and navigation events efficiently.
- Dynamic Routing: Easily manage your app's routes with support for sound path matching.
- State Management: Easily obtain the status of your routes and navigations.
- Event Notifications: Receive route change events during navigation activities.
- Simplified API: Offers a simple API for subscribing to events, registering routes, cleaning listeners, and navigating between registered routes with minimal code.
- Module Integrity: The API is frozen to prevent runtime modifications, ensuring the reliability and security of the module.
Install this module using pnpm, npm, or yarn:
pnpm add @jamilservices/sb-module-router
npm install @jamilservices/sb-module-router
yarn add @jamilservices/sb-module-router
[!NOTE] This will add the
@jamilservices/sb-module-router
as a development dependency in your project.
You can use the following CDN links to include the module:
https://cdn.skypack.dev/@jamilservices/sb-module-router@latest/lib/main.min.js
https://cdn.jsdelivr.net/npm/@jamilservices/sb-module-router@latest/lib/main.min.js
https://unpkg.com/@jamilservices/sb-module-router@latest/lib/main.min.js
- From install (pnpm/npm/yarn):
import { RouterModule } from '@jamilservices/sb-module-router';
- From CDN:
import { RouterModule } from 'https://cdn.jsdelivr.net/npm/@jamilservices/sb-module-router@latest/lib/main.min.js';
const router = RouterModule.instance();
router.events.subscribe({
id: "uniqueListenerId",
fn: data => console.log("Router data:", data)
});
router.events.unsubscribe("uniqueListenerId");
router.register("home");
OR
router.register({
id: "home",
title: "Test Home Router Title"
});
router.unregister("home");
router.register({
id: "404",
redirect: "home"
});
router.navigate("home");
router.state();
- Description: Creates/retrieves and returns a new/existing router instance.
-
Object propertie:
-
home
: Optional - Default route for the application. Defaults to/
if not specified. -
subpath
: Optional - If set to true the root path is considered as "./", default is "/". -
prefix
: Optional - A prefix to include between the route and the hash.
-
-
Description: Returns an object with the keys:
current
andprevious
.
- Description: Navigates to a registered route.
- Description: Registers a route using either a string or an object for more options.
-
Object Properties:
-
id
: Required - URL route, e.g., "home" or "contact". -
title
: Optional - Title to set if the route is called successfully. -
redirect
: Optional - Internal route redirection for internal and/or SEO purposes.
-
- Description: Removes a registered route for maintenance or private purposes.
- Description: Subscribes to router events.
-
Evemt Data: Returns an object with the
id
property (event identifier valuesrouter-update
ornot-found
) andtarget
, which is the registered ID of the final route. -
Object Properties:
-
id
: Required - Unique identifier for the function receiving the event. -
fn
: Required - Function that will receive the event.
-
- Description: Unsubscribes from router events for the given ID.
Interested in contributing? We welcome your contributions to enhance the frontend capabilities of @jamilservices/sb-module-router
.
Please check our Contribution Guidelines for more details.
@jamilservices/sb-module-router
is available under the MIT License by @jamilservicos.
- You are free to modify and reuse the code.
- The original license must be included with copies of this software.
- We encourage linking back to this repository if you use a significant portion of the source code.