IP Stencil Route Listener

A simple listener around Stencil router.

Installing

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/[email protected]/dist/ip-stencil-route-listener.js'></script> in the head of your index.html

In a stencil-starter app

• Run npm install ip-stencil-route-listener --save
• Add an import to the npm packages import 'ip-stencil-route-listener';

Using Example

Check out this demo

  @State()
  pageState: string[] = [];

  @Listen('pageEnter')
  onPageEnter(e: CustomEvent<LocationSegments>) {
    this.pageState = [...this.pageState, `Page enter ${e.detail.pathname}`];
  }

  @Listen('pageLeave')
  onPageLeave(e: CustomEvent<LocationSegments>) {
    this.pageState = [...this.pageState, `Page leave ${e.detail.pathname}`];
  }

  render() {
    return (
      <main>
        <stencil-router>
          <stencil-route-switch scrollTopOffset={0}>
            <stencil-route
              url="/"
              component="ip-app-home"
              exact={true}
              // The Magic happens here
              routeRender={props => <ip-stencil-route-listener props={props} />}
            />
            <stencil-route
              url="/about"
              exact={true}
              component="ip-app-about"
              // The Magic happens here
              routeRender={props => <ip-stencil-route-listener props={props} />}
            />
          </stencil-route-switch>
        </stencil-router>
        <ul>
          {this.pageState.map(page => (
            <li>{page}</li>
          ))}
        </ul>
      </main>
    );
  }