SigPro

Appearance

Navigation Plugin: Router ​

The SigPro Router handles URL changes via hashes (#) and maps them to components. It supports dynamic parameters (like :id) and asynchronous loading for heavy pages.

1. Core Features ​

  • Hash-based: Works everywhere without special server configuration.
  • Lazy Loading: Pages are only downloaded when the user visits the route.
  • Reactive: The view updates automatically when the hash changes.
  • Dynamic Routes: Supports paths like /user/:id.

2. Installation ​

The Router is usually included in the official plugins package.

bash
npm install -D tailwindcss @tailwindcss/vite daisyui@next
bash
pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
bash
yarn add -D tailwindcss @tailwindcss/vite daisyui@next
bash
bun add -d tailwindcss @tailwindcss/vite daisyui@next

3. Setting Up Routes ​

In your App.js (or a dedicated routes file), define your navigation map.

javascript
const routes = [
  { path: '/', component: () => h1("Home Page") },
  { 
    path: '/admin', 
    // Lazy Loading: This file is only fetched when needed
    component: () => import('./pages/Admin.js') 
  },
  { path: '/user/:id', component: (params) => h2(`User ID: ${params.id}`) },
  { path: '*', component: () => div("404 - Page Not Found") }
];

export default () => div([
  _navbar({ title: "My App" }),
  _router(routes) // The router is now a global tag
]);

4. Navigation (_router.go) ​

To move between pages programmatically (e.g., inside an onclick event), use the global _router.go helper.

javascript
_button({ 
  onclick: () => _router.go('/admin') 
}, "Go to Admin")

5. How it Works (Under the Hood) ​

The router tracks the window.location.hash and uses a reactive signal to trigger a re-render of the specific area where _router(routes) is placed.

  1. Match: It filters your route array to find the best fit.
  2. Resolve: * If it's a standard function, it executes it immediately.
    • If it's a Promise (via import()), it shows a loading state and swaps the content once the module arrives.
  3. Inject: It replaces the previous DOM node with the new page content surgically.

6. Integration with UI Components ​

Since you are using the UI Plugin, you can easily create active states in your navigation menus by checking the current hash.

javascript
// Example of a reactive sidebar menu
_menu({
  items: [
    { 
      label: 'Dashboard', 
      active: () => window.location.hash === '#/', 
      onclick: () => _router.go('/') 
    },
    { 
      label: 'Settings', 
      active: () => window.location.hash === '#/settings', 
      onclick: () => _router.go('/settings') 
    }
  ]
})