lit-ui-router / TransitionController

Class: TransitionController

Defined in: packages/lit-ui-router/src/transition-controller.ts:145

A zero-dependency Lit ReactiveController that keeps its host element synchronized with UI-Router transitions.

The controller registers TransitionService hooks (by default onSuccess) when the host connects and calls host.requestUpdate() whenever a matching transition event fires — no manual requestUpdate() plumbing, no leaked hooks. All registered hooks are deregistered in hostDisconnected(), so the controller is garbage-collection safe for elements that come and go from the DOM (including sticky routed components).

On (re)connect the controller also synchronizes once with the router's current state, so hosts render fresh data even when they connect after a transition has already completed.

Examples

Re-render on every successful transition

class NavHeader extends LitElement {
  private transitions = new TransitionController(this);

  render() {
    // Re-evaluated after every successful transition
    return html`Current state: ${this.transitions.current?.name}`;
  }
}

React to parameter changes on a specific state

class UserDetail extends LitElement {
  private transitions = new TransitionController(this, {
    criteria: { to: 'users.detail' },
    callback: () => this.loadUser(this.transitions.params.userId),
  });
}

With an explicit router instance

const controller = new TransitionController(host, { router });

Implements

• ReactiveController

Constructors

Constructor

new TransitionController(host, options?): TransitionController;

Defined in: packages/lit-ui-router/src/transition-controller.ts:156

Parameters

Parameter	Type
host	ReactiveControllerHost & Element
options	TransitionControllerOptions

Returns

TransitionController

Accessors

current

Get Signature

get current():
  | StateDeclaration
  | undefined;

Defined in: packages/lit-ui-router/src/transition-controller.ts:187

The current [[StateDeclaration]] (globals.current).

Returns

| StateDeclaration | undefined

---

globals

Get Signature

get globals():
  | UIRouterGlobals
  | undefined;

Defined in: packages/lit-ui-router/src/transition-controller.ts:177

The router's [[UIRouterGlobals]], if a router has been discovered.

Returns

| UIRouterGlobals | undefined

---

params

Get Signature

get params(): RawParams;

Defined in: packages/lit-ui-router/src/transition-controller.ts:182

The current parameter values (globals.params).

Returns

RawParams

---

router

Get Signature

get router():
  | UIRouter
  | undefined;

Defined in: packages/lit-ui-router/src/transition-controller.ts:172

The observed [[UIRouter]] instance.

undefined until provided via [[TransitionControllerOptions.router]] or discovered from an ancestor <ui-router> on connect.

Returns

| UIRouter | undefined

---

transition

Get Signature

get transition():
  | Transition
  | undefined;

Defined in: packages/lit-ui-router/src/transition-controller.ts:195

The most recent [[Transition]] observed by this controller (set by observed events and on host connect).

Returns

| Transition | undefined

Methods

includes()

includes(stateOrName, params?): boolean;

Defined in: packages/lit-ui-router/src/transition-controller.ts:205

Delegates to StateService.includes: is the state (or glob pattern, e.g. 'admin.**') included in the current active state?

Returns false when no router has been discovered.

Parameters

Parameter	Type
stateOrName	StateOrName
params?	RawParams

Returns

boolean