import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const E=JSON.parse('{"title":"🚦 Routing: $router() & Utilities","description":"","frontmatter":{},"headers":[],"relativePath":"api/router.md","filePath":"api/router.md"}'),n={name:"api/router.md"};function h(l,s,p,r,k,o){return a(),t("div",null,[...s[0]||(s[0]=[e(`

🚦 Routing: $router() & Utilities ​

SigPro includes a built-in, lightweight Hash Router to create Single Page Applications (SPA). It manages the URL state, matches components to paths, and handles the lifecycle of your pages automatically.

🛠 Router Signature ​

typescript
$router(routes: Route[]): HTMLElement

Route Object ​

PropertyTypeDescription
pathstringThe URL fragment (e.g., "/", "/user/:id", or "*").
componentFunctionA function that returns a Node, a String, or a reactive View.

📖 Usage Patterns ​

1. Defining Routes ​

The $router returns a div element with the class .router-outlet. When the hash changes, the router destroys the previous view and mounts the new one inside this container.

javascript
const App = () => Div({ class: "app-layout" }, [
  Navbar(),
  // The router outlet is placed here
  $router([
    { path: "/", component: Home },
    { path: "/profile/:id", component: (params) => UserProfile(params.id) },
    { path: "*", component: () => H1("404 Not Found") }
  ])
]);

2. Dynamic Segments (:id) ​

The router automatically parses URL parameters (like :id) and passes them as an object to the component function. You can also access them globally via $router.params().

javascript
// If the URL is #/profile/42
const UserProfile = (params) => {
  return H1(\`User ID is: \${params.id}\`); // Displays "User ID is: 42"
};

🏎 Navigation Utilities ​

SigPro provides a set of programmatic methods to control the history and read the state.

$router.to(path) ​

Navigates to a specific path. It automatically formats the hash (e.g., /home becomes #/home).

javascript
Button({ onclick: () => $router.to("/dashboard") }, "Go to Dashboard")

$router.back() ​

Goes back to the previous page in the browser history.

javascript
Button({ onclick: () => $router.back() }, "Back")

$router.path() ​

Returns the current path (without the #).

javascript
$watch(() => {
  console.log("Current path is:", $router.path());
});

⚡ Technical Behavior ​

🎨 Styling the Outlet ​

The router returns a standard div with the .router-outlet class. You can easily style it or add transitions:

css
.router-outlet {
  display: block;
  min-height: 100vh;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
`,33)])])}const g=i(n,[["render",h]]);export{E as __pageData,g as default};