Hot swap Svelte components

<script lang="ts">
  import cssText from "data-text:./Insights.scss";
  import { getGlobalElStyle } from "~cs-helpers/yttm-utils";

  function injectStyle() {
    const elStyle = getGlobalElStyle();
    elStyle.textContent += cssText;
  }

  injectStyle();

  const tabs = {
    watchTime: {
      title: "Watch Time",
      component: import("~popup/components/Insights/tabs/InsightWatchTime.svelte")
    }
  };

  let activeTab = Object.keys(tabs)[0];
</script>

<div class="insights">
  <div class="insights__tabs">
    {#each Object.keys(tabs) as tab}
      <button
        class="insights__tab"
        class:active={activeTab === tab}
        on:click={() => activeTab = tab}
      >
        {tabs[tab].title}
      </button>
    {/each}
  </div>

  <div class="insights__content">
    {#await tabs[activeTab].component then component}
      <svelte:component this={component.default} />
    {/await}
  </div>
</div>