lit-ui-router / TransitionController

Class: TransitionController

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

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:165

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:196

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:186

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:191

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:181

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:204

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:214

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