@llui/router

Router for LLui. Structured path matching with history and hash mode support.

pnpm add @llui/router

Usage

import { route, param, rest, createRouter, connectRouter } from '@llui/router'
import { div, a } from '@llui/dom'

// Define routes
const home = route([])
const search = route(['search'], (b) => b, ['q', 'page'])
const detail = route(['item', param('id')])
const docs = route(['docs', rest('path')])

// Create router
const router = createRouter({ home, search, detail, docs }, { mode: 'history' })

// Connect to effects system
const routing = connectRouter(router)

API

Route Definition

| Function | Description | | --------------------------------------- | --------------------------------------------------------- | | route(segments, builder?, queryKeys?) | Define a route with path segments and optional query keys | | param(name) | Named path parameter (e.g. /item/:id) | | rest(name) | Rest parameter capturing remaining path |

Router

| Function | Description | | ------------------------------ | ------------------------------------------------------- | | createRouter(routes, config) | Create router instance (history or hash mode) | | connectRouter(router) | Connect router to LLui effects, returns routing helpers |

Routing Helpers (from connectRouter)

| Method / Effect | Description | | ------------------------------------- | ------------------------------------------------------------- | | .link(send, route, attrs, children) | Render a navigation link with client-side routing | | .listener(send) | Popstate listener -- call in view() to react to URL changes | | .handleEffect | Effect handler plugin for navigate/push/replace effects | | .push(route) | Push navigation effect | | .replace(route) | Replace navigation effect | | .back() | Navigate back effect | | .forward() | Navigate forward effect | | .scroll() | Scroll restoration effect |

Guards

Router guards let you block or redirect navigation. Pass beforeEnter and/or beforeLeave to connectRouter:

const routing = connectRouter(router, {
  // Called before entering a new route
  beforeEnter(to, from) {
    // Return void   → allow
    // Return false  → block
    // Return Route  → redirect
  },
  // Called before leaving the current route
  beforeLeave(from, to) {
    // Return true  → allow
    // Return false → block
  },
})

Guards run in the effect handler and the popstate listener, keeping update() pure.

Auth guard

const routing = connectRouter(router, {
  beforeEnter(to) {
    if (to.page === 'admin' && !isLoggedIn()) {
      return { page: 'login' }
    }
  },
})

Unsaved changes guard

const routing = connectRouter(router, {
  beforeLeave(from) {
    if (from.page === 'editor' && hasUnsavedChanges()) {
      return confirm('Discard unsaved changes?')
    }
    return true
  },
})

License

MIT