Lit UI Router

lit-ui-router-mobx / RouterReactionController

Class: RouterReactionController<T> ​

Defined in: lit-ui-router-mobx/src/router-reaction-controller.ts:58

A ReactionController preselected on the router: observes the RouterStore of the router the host's nearest provider supplies.

On hostConnected it requests the router over the context-request protocol, falling back to the ui-router-context event, so <ui-router>, <ui-view>, a @lit/context ContextProvider of routerContext and provideRouter all answer. There is no prop drilling and no store wiring in router configuration: RouterStore.for attaches lazily on first use. It then runs a MobX reaction over the selector while the host is connected. When the provider hands it a new router, it rebinds to that router's store:

ts
class App extends LitElement {
  private active = new RouterReactionController(
    this,
    (route) => route.includes('admin.**'),
  );

  render() {
    return html`...${this.active.value ? 'admin' : ''}...`;
  }
}

The reaction fires immediately on every (re)connect, so sticky routed components resynchronize with the current route instead of rendering stale values. If no provider answers (and no explicit router option is given), the controller is a no-op until reconnected under one.

Type Parameters ​

Type Parameter
T

Implements ​

Constructors ​

Constructor ​

ts
new RouterReactionController<T>(
   host, 
   selector, 
   options?
): RouterReactionController<T>;

Defined in: lit-ui-router-mobx/src/router-reaction-controller.ts:69

Parameters ​

ParameterType
hostReactiveControllerHost & Element
selector(store) => T
options?RouterReactionControllerOptions<T>

Returns ​

RouterReactionController<T>

Properties ​

PropertyTypeDescriptionDefined in
store?RouterStoreThe observed store; set while connected to a router context.lit-ui-router-mobx/src/router-reaction-controller.ts:63
valueTThe selected value, for use in render().lit-ui-router-mobx/src/router-reaction-controller.ts:60

Methods ​

hostConnected() ​

ts
hostConnected(): void;

Defined in: lit-ui-router-mobx/src/router-reaction-controller.ts:79

Called when the host is connected to the component tree. For custom element hosts, this corresponds to the connectedCallback() lifecycle, which is only called when the component is connected to the document.

Returns ​

void

Implementation of ​

ts
ReactiveController.hostConnected

hostDisconnected() ​

ts
hostDisconnected(): void;

Defined in: lit-ui-router-mobx/src/router-reaction-controller.ts:95

Called when the host is disconnected from the component tree. For custom element hosts, this corresponds to the disconnectedCallback() lifecycle, which is called the host or an ancestor component is disconnected from the document.

Returns ​

void

Implementation of ​

ts
ReactiveController.hostDisconnected