github.com/GoogleCloudPlatform/testgrid@v0.0.174/web/src/testgrid-router.ts (about)

     1  import { LitElement, html } from "lit";
     2  import { customElement } from "lit/decorators.js";
     3  import { Router } from "@lit-labs/router";
     4  import './testgrid-data-content';
     5  import './testgrid-index';
     6  
     7  // Defines the type of params used for rendering components under different paths
     8  interface RouteParameter {
     9      [key: string]: string | undefined;
    10  }
    11  
    12  /**
    13   * Class definition for the `testgrid-router` element.
    14   * Handles the routing logic.
    15   */
    16  @customElement('testgrid-router')
    17  export class TestgridRouter extends LitElement{
    18    private router = new Router(this, [
    19      {
    20        path: '/:dashboard/*', 
    21        render: (params: RouteParameter) => html`<testgrid-data-content .dashboardName=${params.dashboard} .tabName=${params[0]} showTab></testgrid-data-content>`,
    22      },
    23      {
    24        path: '/:dashboard', 
    25        render: (params: RouteParameter) => html`<testgrid-data-content .dashboardName=${params.dashboard}></testgrid-data-content>`,
    26      },
    27      {
    28        path: '/',
    29        render: () => html`<testgrid-index></testgrid-index>`,
    30      },
    31    ])
    32  
    33    /**
    34     * Lit-element lifecycle method.
    35     * Invoked when a component is added to the document's DOM.
    36     */
    37    connectedCallback(){
    38      super.connectedCallback();
    39      window.addEventListener('location-changed', () => {
    40        this.router.goto(location.pathname);
    41      });
    42    }
    43  
    44    /**
    45     * Lit-element lifecycle method.
    46     * Invoked on each update to perform rendering tasks.
    47     */
    48    render(){
    49      return html`${this.router.outlet()}`;
    50    }
    51  }