oEmbeddr - initial app

App.svelte

<script>
  let url = '';
  let result;

  async function getResult() {
    // We got TikTok's oEmbed API endpoint from the developer portal: https://developers.tiktok.com/doc/Embed
    let response = await fetch(`https://www.tiktok.com/oembed?url=${url}`);

    if (response.ok) {
      let data = await response.json();
      return data;
    } else {
      throw new Error(response.statusText);
    }
  }

  function submitHandler(e) {
    // Let's call the Promise "result"
    result = getResult();
  }
</script>

<form on:submit|preventDefault={submitHandler}>
  <input bind:value={url} type="text" />
  <button type="submit">Get a code</button>
</form>

{#if result === undefined}
  <p>
    Request was not sent yet. The name of Promise we listen to is "result" (on UI: "Initial state")
  </p>
{:else}
  {#await result}
    <p>Waiting for the Promise to resolve (on UI:"Loading message")</p>
  {:then value}
    <p>
      Showing the Promise resolve result - in "value" variable (on UI: "Results screen")
      {value.html}
    </p>
  {:catch error}
    <p>
      Something went wrong - we can get more details from the "error" variable (on UI: "Error screen")
      {error}
    </p>
  {/await}
{/if}