monorepo/music-player/client/src/main.ts

import * as _ from "lodash";
import { TrackInfo, getTracks } from "./client";
import { TrackName, TrackCard } from "./blocks/track";

window.customElements.define("track-name", TrackName);
window.customElements.define("track-card", TrackCard);

declare global {
  interface HTMLElementTagNameMap {
    "track-name": TrackName;
    "track-card": TrackCard;
  }
}

const replaceTitle = () => {
  const title = document.querySelector(".js-title");
  if (title && title.innerHTML) {
    title.innerHTML = "Music Player Paused";
  }
};

const updateTrackList = (tracks: TrackInfo[]) => {
  const track_list = document.querySelector(".track-list__tracks");
  if (track_list) {
    let track_formats = _.map(tracks, (info) => {
      let card: TrackCard = document.createElement("track-card");
      card.name = info.name || null;
      return card;
    });
    _.map(track_formats, (trackCard) => {
      let listItem = document.createElement("li");
      listItem.classList.add("track-list__row");
      listItem.appendChild(trackCard);
      track_list.appendChild(listItem);
    });
  } else {
    console.log("track_list does not exist");
  }
};

const run = () => {
  getTracks().then((tracks) => updateTrackList(tracks));
};

run();