@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' &#x26;&#x26; !isLoggedIn()) {
      return { page: 'login' }
    }
  },
})

Unsaved changes guard

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

License

MIT