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

/**
 * @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';

const template = (el) => 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) => demoTemplate(demo))}
  </tbody>
</table>
`;
const demoTemplate = (demo) => html`
<tr>
  <td><a href="/demo/${demo}">${demo}</a></td>
</tr>
`;

define('demo-list-sk', class extends ElementSk {
  constructor() {
    super(template);
    this._demos = [];
    this._repoURL = '';
    this._repoHash = '';
  }

  connectedCallback() {
    super.connectedCallback();
    fetch('/demo/metadata.json', { method: 'GET' })
      .then(jsonOrThrow)
      .then((json) => {
        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();
  }
});