iten-devtools

Adapter-neutral devtools helpers for iten.

This package does not render a UI. It subscribes to any ItenCore-like router and keeps a bounded event log that custom panels, tests, browser extensions, or embedded app debug views can render.

Install

npm install iten-devtools

Quick Start

import { createItenCore, createRoute, defineRoutes, route } from 'iten-core'
import { createItenDevtools } from 'iten-devtools'

const routes = defineRoutes({
  home: route(),
  detail: route<{ id: string }>(),
})

const toRoute = createRoute(routes)

const router = createItenCore({
  initial: toRoute({ name: 'home' }),
})

const devtools = createItenDevtools({ router })

await router.navigate({ target: toRoute({ name: 'detail', params: { id: '42' } }) })

devtools.getSnapshot().events

Snapshot Shape

type DevtoolsSnapshot = {
  state: RouterState
  events: DevtoolsEvent[]
}

Each event includes:

• type: init, route, pending, error, idle, or history
• timestamp
• route
• pendingRoute
• error
• canGoBack
• historyLength

API

const devtools = createItenDevtools({
  router,
  maxEvents: 100,
  now: Date.now,
})

const stop = devtools.subscribe({
  listener: (snapshot) => {
    console.log(snapshot.events)
  },
})

devtools.clear()
stop()
devtools.dispose()