Page Mixin

The CellsPageMixin is a mixin that integrates the Core API into a web component designed to function as a page. By applying this mixin, the component gains access to essential page lifecycle hooks, such as onPageEnter and onPageLeave, which are invoked when the page is entered or left, respectively. Additionally, CellsPageMixin equips the component with a comprehensive set of functions to interact with the core system: publish, subscribe, unsubscribe, navigate, etc.

The CellsPageMixin serves as an alternative to the PageController. The primary distinction between the two is that a class using CellsPageMixin will directly incorporate all the core API methods. In contrast, with PageController, the page component relies on the controller to invoke these methods. Consequently, CellsPageMixin provides a more integrated approach, allowing direct access to core functionalities such as publish, subscribe, unsubscribe, and navigate within the component itself. However, unlike PageController, CellsPageMixin is not tied to LitElement, meaning it does not support bounded properties that leverage LitElement's reactive nature. This makes CellsPageMixin a suitable choice for scenarios where direct method access is preferred over the reactive property binding offered by LitElement.

To use the mixin just import it from '@open-cells/page-mixin' and wrap your page class.

import { PageMixin } from '@open-cells/page-mixin';

export class HomePage extends PageMixin(LitElement) {
  ...
}

The mixin adds the following functions to the augmented class:

Subscribes to the channel named channelName and executes the given callback function when it reacts to state change. If there is no channel with name channelName, then it is created.

import { PageMixin } from '@open-cells/page-mixin';

class MyPage extends PageMixin(LitElement) {
  constructor() {
    super();
    this._handleConnections();
  }

  _handleConnections() {
    // subscribe to ch_user channel and executes _updateUserData with given channel value when channel state mutates.
    this.subscribe('ch_user', (userList : Array<User>) =>
      this._updateUserData(userList)
    );
  }

  _updateUserData(userList) {
    ...
  }
}

Unsubscribes from the given channel.

Publishes a value to a channel named channelName. If there is no channel with name channelName, then it is created.

Automatically publishes on the channel named channelName the payload from event of type eventName dispatched by htmlElement. If there is no channel with name channelName, then it is created.

import {PageMixin} from '@open-cells/page-mixin';

class MyPage extends PageMixin(LitElement) {
  constructor() {
    super();
    this._handleConnections();
  }

  _handleConnections() {
    // 'change' event payload will be stored in 'ch_user' channel.
    this.publishOn('ch_user', this.userInput, 'change');
  }
}

See Channels for more information on how channels work.

Navigates to the route that is associated with the page named pageName. Params are optional and are given as an object with key-value format.

Navigates to the last page visited.

Returns an object with the current route information.

Get the context object that has the Router Interceptor.

Set a new context object for the Router Interceptor.

Update the Router Interceptor context.

Reset the Router Interceptor context (set an empty object {}).

For more detailed information on routing see:

• Navigating programmatically
• Router interceptor

Executed by PageController each time the route changes and the page enters into view.

import {html, LitElement} from 'lit';
import {PageMixin} from '@open-cells/page-mixin';
import {customElement} from 'lit/decorators.js';

@customElement('favorite-recipes-page')
export class FavoriteRecipesPage extends PageMixin(LitElement) {
  onPageEnter() {
    // custom logic to be executed each time the page enters into view like fetching the data
  }
}

Executed by PageController each time the route changes and the current page leaves the view disappearing.

import {html, LitElement} from 'lit';
import {PageMixin} from '@open-cells/page-mixin';
import {customElement} from 'lit/decorators.js';

@customElement('favorite-recipes-page')
export class FavoriteRecipesPage extends PageMixin(LitElement) {
  onPageLeave() {
    // custom logic to be executed each time before leaving the view like "cleaning" the page
  }
}