demos/modules/demo-list-sk/demo-list-sk.ts

/**
 * @fileoverview A custom element for the basic demos.skia.org header.
 */

import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow';

import { errorMessage } from 'elements-sk/errorMessage';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { Metadata } from '../rpc_types';

const demoTemplate = (demo: string) => html`
<tr>
  <td><a href="/demo/${demo}">${demo}</a></td>
</tr>
`;

export class DemoListSk extends ElementSk {
    private static template = (el: DemoListSk) => html`
<table class=demolist>
  <thead>
    <tr>
      <th>Available Demos (<a href="${el.repoURL}">${el.repoHash.substring(0, 10)}</a>)</th>
    </tr>
  </thead>
  <tbody>
    ${el.demos.map((demo: string) => demoTemplate(demo))}
  </tbody>
</table>
`;

    private demos: string[] = [];

    private repoURL: string = '';

    private repoHash: string = '';

    constructor() {
      super(DemoListSk.template);
    }

    connectedCallback(): void {
      super.connectedCallback();
      fetch('/demo/metadata.json', { method: 'GET' })
        .then(jsonOrThrow)
        .then((json: Metadata) => {
          this.demos = json.demos || [];
          this.repoURL = json.revision.url;
          this.repoHash = json.revision.hash;
          this._render();
          this.dispatchEvent(new CustomEvent('load-complete', { bubbles: true }));
        })
        .catch(errorMessage);
      this._render();
    }
}

define('demo-list-sk', DemoListSk);