Skip to content

kit-route

<kit-route pattern="/projects/:projectId" surface="project-page">
  <kit-boundary surface="project-settings">
    <button data-meta-event="project.saved">Save</button>
  </kit-boundary>
</kit-route>

<kit-route> is a context bridge, not a full router. It reads the current location.pathname, matches it against pattern, emits route.changed, and exposes route context to nested boundaries.

Package

@atheory-ai/kitsune-app

import '@atheory-ai/kitsune-app'
import { KitRouteElement } from '@atheory-ai/kitsune-app'

Attributes

Attribute	Type	Notes
`pattern`	string	Path pattern with `:param` segments. Reflects.
`surface`	string	Optional surface contributed to descendant context. Reflects.
`feature`	string	Optional feature contributed to descendant context. Reflects.

Context

The route contributes:

{
  route: {
    path: '/projects/kitsune',
    pattern: '/projects/:projectId',
    params: { projectId: 'kitsune' },
    matched: true,
  }
}

Nested <kit-boundary> elements inherit that route context, then add their own surface, feature, and entity context.

Events

<kit-route> emits route.changed when it connects and whenever popstate fires.

{
  type: 'route.changed',
  context: {
    surface: 'project-page',
    route: {
      path: '/projects/kitsune',
      pattern: '/projects/:projectId',
      params: { projectId: 'kitsune' },
      matched: true,
    },
  },
  payload: {
    path: '/projects/kitsune',
    pattern: '/projects/:projectId',
    params: { projectId: 'kitsune' },
    matched: true,
  },
}

See also